html,body{overflow-x:hidden;max-width:100vw;}
/* Gaya SamzzStore — dipisah dari index.html oleh pisah.py.
*
* Urutan di dalam berkas ini sudah final dan BERARTI: dasar, lalu lapis
* premium, lalu lapis 2026 yang menang urutan. Jangan disusun ulang.
* Font Plus Jakarta Sans ditanam sebagai data URI — tidak ada satu pun
* permintaan ke server luar dari halaman ini.
*/
/* =========================================================================
SamzzStore
Bentuk: tombol pill, kartu 16px, input 12px, tile logo 14px, baris varian 12px.
Aksen tunggal: --accent (biru kobalt) dipakai di seluruh halaman.
Dua tampilan terpisah: #view-apps dan #view-jasa, ditukar lewat menu.
========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
[hidden]{display:none !important}
.hidden{display:none}
:root{
--bg:oklch(98.6% .002 265);
--surface:oklch(100% 0 0);
--surface-2:oklch(96.4% .003 265);
--text:oklch(16% .012 265);
--muted:oklch(50% .012 265);
--line:oklch(16% .012 265 / .11);
--line-strong:oklch(16% .012 265 / .20);
--accent:oklch(52% .208 264);
--accent-ink:oklch(100% 0 0);
--accent-soft:oklch(52% .208 264 / .10);
--shadow:0 1px 2px oklch(16% .012 265 / .05), 0 12px 32px -18px oklch(16% .012 265 / .35);
--r-card:16px;
--r-input:12px;
--r-tile:14px;
--ease:cubic-bezier(.16,1,.3,1);
color-scheme:light;
}
:root[data-theme="dark"]{
--bg:oklch(14% .01 265);
--surface:oklch(18% .012 265);
--surface-2:oklch(22.5% .014 265);
--text:oklch(97% .004 265);
--muted:oklch(68% .014 265);
--line:oklch(100% 0 0 / .10);
--line-strong:oklch(100% 0 0 / .20);
--accent:oklch(74% .152 264);
--accent-ink:oklch(16% .03 265);
--accent-soft:oklch(74% .152 264 / .14);
--shadow:0 1px 2px oklch(0% 0 0 / .5), 0 16px 40px -20px oklch(0% 0 0 / .8);
color-scheme:dark;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--bg:oklch(14% .01 265);
--surface:oklch(18% .012 265);
--surface-2:oklch(22.5% .014 265);
--text:oklch(97% .004 265);
--muted:oklch(68% .014 265);
--line:oklch(100% 0 0 / .10);
--line-strong:oklch(100% 0 0 / .20);
--accent:oklch(74% .152 264);
--accent-ink:oklch(16% .03 265);
--accent-soft:oklch(74% .152 264 / .14);
--shadow:0 1px 2px oklch(0% 0 0 / .5), 0 16px 40px -20px oklch(0% 0 0 / .8);
color-scheme:dark;
}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
background:var(--bg);
color:var(--text);
font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size:16px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:20px}
.icon{width:1em;height:1em;fill:currentColor;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- tombol ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
border-radius:999px;border:1px solid transparent;
padding:.72rem 1.25rem;font-size:.95rem;font-weight:600;line-height:1.1;
white-space:nowrap;cursor:pointer;
transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
;min-height:44px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 86%,var(--text))}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--text)}
.btn-sm{padding:.5rem .95rem;font-size:.85rem}
.btn-block{width:100%}
:where(a,button,input,summary):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
/* ---------- nav ---------- */
.nav{
position:sticky;top:0;z-index:40;
background:color-mix(in srgb,var(--bg) 88%,transparent);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid var(--line);
}
.nav-in{height:68px;display:flex;align-items:center;gap:.75rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:-.02em;font-size:1.06rem}
.brand-mark{
width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;
background:linear-gradient(135deg,#5B7BFF 0%,#2544E0 100%);
box-shadow:0 6px 16px -8px rgba(37,68,224,.7), inset 0 1px 0 rgba(255,255,255,.25);
transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.brand-mark svg{width:24px;height:24px;display:block;filter:drop-shadow(0 1px 2px rgba(11,14,20,.35))}
a.brand:hover .brand-mark{transform:scale(1.06) rotate(-2deg);box-shadow:0 10px 22px -8px rgba(37,68,224,.85), inset 0 1px 0 rgba(255,255,255,.25)}
.brand-name{display:inline}
/* pemisah dua tampilan */
.seg{display:flex;gap:3px;padding:3px;border:1px solid var(--line-strong);border-radius:999px;margin-inline:auto}
.seg button{
border:0;background:transparent;border-radius:999px;cursor:pointer;
padding:.4rem .85rem;font-size:.85rem;font-weight:600;color:var(--muted);white-space:nowrap;
transition:background .18s var(--ease),color .18s var(--ease);
}
.seg button:hover{color:var(--text)}
.seg button[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}
.seg-full{display:none}
@media (min-width:640px){
.seg button{padding:.4rem 1.1rem;font-size:.9rem}
.seg-full{display:inline}
.seg-short{display:none}
}
.nav-act{display:flex;align-items:center;gap:.5rem}
.iconbtn{
width:40px;height:40px;border-radius:999px;display:grid;place-items:center;
background:transparent;border:1px solid var(--line-strong);cursor:pointer;font-size:1.15rem;
transition:border-color .18s var(--ease);
}
.iconbtn:hover{border-color:var(--text)}
#theme{display:none}
@media (min-width:430px){ #theme{display:grid} }
.cart-btn{position:relative}
.cart-count{
position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;
border-radius:999px;background:var(--accent);color:var(--accent-ink);
font-size:.68rem;font-weight:700;display:none;place-items:center;line-height:1;
}
.cart-count.on{display:grid}
@media (prefers-reduced-motion:no-preference){
.cart-count.pop{animation:pop .35s var(--ease)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
}
.wa-label{display:none}
#wa-nav{padding:0;width:40px;height:40px}
@media (min-width:760px){
.wa-label{display:inline}
#wa-nav{padding:.5rem .95rem;width:auto;height:auto}
}
/* ---------- hero ---------- */
.hero{padding:clamp(2.75rem,6vw,4.75rem) 0 clamp(2.25rem,4vw,3.25rem)}
.hero-grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:900px){ .hero-grid{grid-template-columns:1.05fr .95fr;gap:3.5rem} }
.hero h1{
font-size:clamp(2rem,4.4vw,2.95rem);line-height:1.1;letter-spacing:-.035em;font-weight:800;
margin-bottom:1rem;max-width:19ch;
}
.hero h1 em{font-style:italic;color:var(--accent);line-height:1.15;display:inline-block;padding-bottom:2px}
.hero p{color:var(--muted);font-size:clamp(1rem,1.6vw,1.1rem);max-width:46ch;margin-bottom:1.75rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem}
.mosaic{
display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
padding:18px;border:1px solid var(--line);border-radius:24px;
background:radial-gradient(120% 90% at 85% 0%, var(--accent-soft), transparent 62%), var(--surface);
box-shadow:var(--shadow);
}
.mosaic img{width:100%;height:auto;aspect-ratio:1;border-radius:var(--r-tile);background:#FFFFFF;object-fit:cover}
.mosaic img:nth-child(3n){transform:translateY(10px)}
@media (prefers-reduced-motion:no-preference){
.mosaic img{animation:float 7s var(--ease) infinite;animation-delay:calc(var(--i,0) * .35s)}
.mosaic img:nth-child(3n){animation-name:float2}
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes float2{0%,100%{transform:translateY(10px)}50%{transform:translateY(2px)}}
/* ---------- baris jaminan ---------- */
.assure{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.assure .wrap{padding:2rem 0}
.assure-grid{display:grid;grid-template-columns:1fr;gap:2rem;margin-top:2rem}
@media (min-width:760px){ .assure-grid{grid-template-columns:repeat(3,1fr)} }
.assure-item{display:flex;gap:.8rem;align-items:flex-start;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.assure-item:last-child{border-bottom:0}
.assure-item .icon{font-size:1.5rem;color:var(--accent);flex:none;margin-top:.1rem}
.assure-item b{display:block;font-size:.97rem}
.assure-item span{color:var(--muted);font-size:.88rem}
/* ---------- bagian umum ---------- */
.sec{padding:clamp(3rem,6vw,5rem) 0}
section[id]{scroll-margin-top:84px}
.sec-head{max-width:62ch;margin-bottom:2rem}
.sec-head h2{font-size:clamp(1.6rem,3.6vw,2.35rem);letter-spacing:-.03em;line-height:1.12;font-weight:800}
.sec-head p{color:var(--muted);margin-top:.7rem}
/* ---------- kontrol katalog ---------- */
.tools{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}
.search{position:relative;max-width:380px;width:100%}
.search .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:1.1rem}
.search input{
width:100%;padding:.78rem 1rem .78rem 2.75rem;border-radius:var(--r-input);
border:1px solid var(--line-strong);background:var(--surface);
}
.search input::placeholder{color:var(--muted);opacity:1}
.chips{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
border:1px solid var(--line-strong);background:transparent;border-radius:999px;
padding:.45rem 1rem;font-size:.87rem;font-weight:600;color:var(--muted);
white-space:nowrap;cursor:pointer;transition:all .18s var(--ease);
}
.chip:hover{color:var(--text);border-color:var(--text)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tally{color:var(--muted);font-size:.85rem;margin-bottom:1.25rem}
/* ---------- kartu produk ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;align-items:start}
.card{
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
padding:1.1rem;display:flex;flex-direction:column;gap:.9rem;
transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.card-top{display:flex;align-items:center;gap:.8rem}
/* tile logo selalu putih supaya logo gelap tetap terbaca di mode gelap */
.logo{width:46px;height:46px;border-radius:var(--r-tile);flex:none;object-fit:cover;background:#FFFFFF;border:1px solid var(--line)}
.logo-g{display:grid;place-items:center;color:var(--accent);font-size:1.5rem;background:var(--surface-2)}
.card h3{font-size:1rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.card .cat{font-size:.78rem;color:var(--muted)}
.vars{display:flex;flex-direction:column;gap:.4rem}
.var{
display:flex;align-items:center;gap:.6rem;padding:.5rem .55rem .5rem .75rem;
border:1px solid var(--line);border-radius:var(--r-input);background:var(--bg);
}
.var .lab{font-size:.83rem;color:var(--muted);line-height:1.3}
.var .pr{margin-left:auto;font-weight:700;font-size:.93rem;white-space:nowrap}
.addv{
width:30px;height:30px;flex:none;border-radius:999px;border:1px solid transparent;
background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;
cursor:pointer;font-size:.95rem;transition:transform .16s var(--ease),background .16s var(--ease);
}
.addv:hover{background:color-mix(in srgb,var(--accent) 86%,var(--text))}
.addv:active{transform:scale(.92)}
.addv.added{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.empty{border:1px dashed var(--line-strong);border-radius:var(--r-card);padding:3rem 1.5rem;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--text);margin-bottom:.35rem}
/* ---------- penanda tipe & stok pada varian ---------- */
.pil{
display:inline-block;margin-left:.4rem;padding:.05rem .4rem;border-radius:999px;
font-size:.68rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
border:1px solid var(--line-strong);color:var(--muted);vertical-align:.05em;
}
.pil-private{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--accent-soft)}
.pil-bulk{color:#8A5B00;border-color:rgba(190,140,20,.45);background:rgba(240,180,40,.14)}
:root[data-theme="dark"] .pil-bulk{color:#F0C24B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pil-bulk{color:#F0C24B}}
/* lambang untuk produk tanpa merek tunggal (E-Book) */
.logo-g{
color:#FFFFFF;border:0;
background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 78%,#FFFFFF) 0%,var(--accent) 100%);
}
/* ---------- laci: langkah bayar & klaim ---------- */
.drawer-body.pay{gap:1.1rem;padding-top:1.1rem;padding-bottom:1.1rem}
.metode{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;padding:.25rem;border:1px solid var(--line-strong);border-radius:999px}
.mtd{
padding:.5rem .4rem;border:0;border-radius:999px;background:transparent;cursor:pointer;
font-size:.85rem;font-weight:600;color:var(--muted);
transition:background .18s var(--ease),color .18s var(--ease);
}
.mtd:hover{color:var(--text)}
.mtd.on{background:var(--accent);color:var(--accent-ink)}
.bayar-panel{display:flex;flex-direction:column;gap:.7rem}
/* QRIS di atas alas putih supaya tetap terbaca pemindai di mode gelap */
.qris{
width:100%;max-width:280px;margin-inline:auto;border-radius:var(--r-tile);
background:#FFFFFF;padding:8px;border:1px solid var(--line);
}
.salin-baris{
display:flex;align-items:center;gap:.75rem;justify-content:space-between;
padding:.8rem .9rem;border:1px solid var(--line);border-radius:var(--r-input);background:var(--bg);
}
.salin-label{display:block;font-size:.75rem;color:var(--muted)}
.salin-isi{display:block;font-size:1rem;font-weight:700;letter-spacing:-.01em;word-break:break-all}
.salin-isi.besar{font-size:1.3rem}
.salin-isi.kode{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;font-weight:600}
.nominal{border:1px solid var(--accent);border-radius:var(--r-input);padding:.15rem;background:var(--accent-soft)}
.nominal .salin-baris{border:0;background:transparent}
.nominal .b-note{padding:0 .9rem .7rem}
.sukses{text-align:center;display:flex;flex-direction:column;gap:.35rem;align-items:center;padding-top:.5rem}
.sukses .icon{font-size:2.2rem;color:var(--accent)}
.sukses b{font-size:1.05rem}
.sukses p{font-size:.88rem;color:var(--muted)}
.langkah{display:flex;flex-direction:column;gap:.6rem;counter-reset:tahap;font-size:.9rem}
.langkah li{position:relative;padding-left:2rem;color:var(--muted)}
.langkah li::before{
counter-increment:tahap;content:counter(tahap);
position:absolute;left:0;top:-.05rem;width:1.4rem;height:1.4rem;border-radius:999px;
display:grid;place-items:center;font-size:.75rem;font-weight:700;
background:var(--accent-soft);color:var(--accent);
}
.langkah b{color:var(--text)}
code{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;background:var(--surface-2);padding:.1rem .3rem;border-radius:6px}
/* ---------- pilihan pengiriman & email pembeli ---------- */
.antar{
padding:.55rem 1.25rem .45rem;border-top:1px solid var(--line);
display:flex;flex-direction:column;gap:.35rem;background:var(--surface-2);
flex-shrink:0;
}
.antar-baris{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.antar-judul{font-size:.78rem;font-weight:600;color:var(--muted);white-space:nowrap}
.metode.kirim{display:flex;gap:2px;padding:2px;border-radius:999px;background:var(--surface)}
.metode.kirim .mtd{padding:.25rem .6rem;font-size:.75rem;font-weight:650;border-radius:999px;line-height:1.2}
.antar-email-wrap{display:flex;flex-direction:column;gap:.15rem}
.isian{display:flex;align-items:center;gap:.4rem}
.isian .salin-label{font-size:.75rem;white-space:nowrap}
.isian input{
width:100%;flex:1;min-width:0;padding:.35rem .65rem;border-radius:8px;
border:1px solid var(--line-strong);background:var(--surface);color:var(--text);
font-size:.84rem;height:34px;
transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.isian input::placeholder{color:var(--muted);opacity:1}
.isian input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
.isian input.salah{border-color:#C2410C}
.wajib{
font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;
color:#C2410C;font-weight:700;margin-left:.2rem;
}
.opsional{
font-size:.68rem;color:var(--muted);font-weight:normal;margin-left:.15rem;
}
:root[data-theme="dark"] .wajib,:root[data-theme="dark"] .isian input.salah{color:#FB923C;border-color:#FB923C}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .wajib{color:#FB923C}
:root:not([data-theme="light"]) .isian input.salah{border-color:#FB923C}
}
.b-note.galat{color:#C2410C}
:root[data-theme="dark"] .b-note.galat{color:#FB923C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .b-note.galat{color:#FB923C}}
.b-note.peringatan{
padding:.7rem .85rem;border-radius:var(--r-input);
background:var(--surface-2);border:1px solid var(--line);
}
/* Tombol yang terkunci harus KELIHATAN terkunci — kalau cuma tidak
bereaksi, orang menekannya berkali-kali lalu mengira webnya rusak. */
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{background:var(--accent)}
/* ---------- pengingat pesanan yang belum diklaim ----------
Duduk di ATAS tombol keranjang mengambang, bukan di sebelahnya:
di layar HP keduanya akan bertabrakan. Warnanya sengaja memakai
aksen — ini satu-satunya hal di halaman yang menyangkut uang yang
sudah berpindah. */
.tertunda{
position:fixed;z-index:46;left:14px;right:14px;
bottom:calc(84px + env(safe-area-inset-bottom,0px));
max-width:440px;margin-inline:auto;
display:flex;align-items:center;gap:.75rem;
padding:.8rem .9rem;border-radius:var(--r-tile,14px);
background:var(--surface);border:1px solid var(--accent);
box-shadow:0 18px 40px -14px rgba(20,22,26,.5);
animation:tertundaIn .32s var(--ease) both;
}
@media (prefers-reduced-motion:reduce){.tertunda{animation:none}}
@keyframes tertundaIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tertunda-isi{flex:1;min-width:0}
.tertunda-judul{display:block;font-size:.8rem;font-weight:700;color:var(--accent)}
.tertunda-rinci{display:block;font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tertunda .btn{flex:none;white-space:nowrap;min-height:44px}
.tertunda-tutup{
flex:none;width:28px;height:28px;padding:0;border:0;border-radius:999px;
background:transparent;color:var(--muted);cursor:pointer;font-size:1.1rem;line-height:1;
}
.tertunda-tutup:hover{background:var(--surface-2);color:var(--text)}
/* ---------- jasa digital ---------- */
.bento{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:820px){
.bento{grid-template-columns:1fr 1fr}
.bento .b1{grid-column:span 2;padding:2.5rem}
.bento .b1 .b-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center}
}
.b{border:1px solid var(--line);border-radius:var(--r-card);padding:2rem;display:flex;flex-direction:column;gap:.8rem;background:var(--surface);transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.b{border-color:var(--line);border-radius:var(--r-card);padding:2rem;display:flex;flex-direction:column;gap:.8rem;background:var(--surface);transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.b:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.b2{background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.b3{background:repeating-linear-gradient(135deg,var(--surface) 0 12px,var(--surface-2) 12px 13px)}
.b-ico{font-size:1.8rem;color:var(--accent)}
.b h3{font-size:1.35rem;letter-spacing:-.02em;font-weight:700}
.b p{color:var(--muted);font-size:.98rem}
.b-list{display:flex;flex-direction:column;gap:.6rem;font-size:.98rem;margin-top:.4rem}
.b-list li{display:flex;gap:.6rem;align-items:flex-start}
.b-list .icon{color:var(--accent);font-size:1.2rem;margin-top:.2rem;flex:none}
.b-cta{margin-top:1.5rem}
.b-note{font-size:.88rem;color:var(--muted)}
/* override warna kartu premium ditaruh setelah aturan .b agar menang urutan */
.b1{
color:#F4F6FF;border-color:transparent;
background:
radial-gradient(120% 100% at 8% 0%, color-mix(in srgb,var(--accent) 68%,#FFFFFF) 0%, transparent 55%),
linear-gradient(150deg, var(--accent) 0%, #0f1220 100%);
}
.b1 h3{color:#FFFFFF;font-size:1.5rem}
.b1 .b-ico{color:#FFFFFF}
.b1 p{color:rgba(244,246,255,.82)}
.b1 .b-list li,.b1 .b-list .icon{color:#FFFFFF}
.b1 .b-note{color:rgba(244,246,255,.72)}
.b1 .btn-primary{background:#FFFFFF;color:#0a0c17}
.b1 .btn-primary:hover{background:#f0f2ff}
/* ---------- alur pesan ---------- */
.flow{display:grid;gap:1.5rem;counter-reset:step}
@media (min-width:860px){ .flow{grid-template-columns:repeat(3,1fr);gap:2rem} }
.flow li{position:relative;padding-top:1.75rem;border-top:2px solid var(--line)}
.flow li::before{
counter-increment:step;content:counter(step);
position:absolute;top:-15px;left:0;width:28px;height:28px;border-radius:999px;
background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;
font-size:.8rem;font-weight:700;
}
.flow h3{font-size:1.05rem;font-weight:700;margin-bottom:.35rem}
.flow p{color:var(--muted);font-size:.92rem}
/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 0;cursor:pointer;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{color:var(--muted);transition:transform .2s var(--ease);font-size:1.1rem}
.faq details[open] summary .icon{transform:rotate(180deg)}
.faq p{color:var(--muted);padding-bottom:1.2rem;max-width:70ch;font-size:.94rem}
/* ---------- cta band + footer ---------- */
.band{
border:1px solid var(--line);border-radius:24px;padding:clamp(2rem,5vw,3.25rem);
background:radial-gradient(100% 120% at 100% 0%, var(--accent-soft), transparent 60%), var(--surface);
display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;
}
.band h2{font-size:clamp(1.5rem,3.4vw,2.1rem);letter-spacing:-.03em;line-height:1.15;max-width:20ch}
.band p{color:var(--muted);margin-top:.5rem;max-width:44ch}
footer{border-top:1px solid var(--line);margin-top:clamp(3rem,6vw,5rem);padding:2.5rem 0}
.foot{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:flex-start}
.foot p{color:var(--muted);font-size:.88rem;max-width:38ch;margin-top:.6rem}
.foot nav{display:flex;flex-wrap:wrap;gap:1.25rem;font-size:.9rem;color:var(--muted)}
.foot nav a{cursor:pointer}
.foot nav a:hover{color:var(--text)}
.copy{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line);color:var(--muted);font-size:.83rem}
/* ---------- keranjang ---------- */
.scrim{position:fixed;inset:0;background:rgba(8,10,14,.5);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .38s var(--ease),visibility .38s;z-index:50}
.scrim.on{opacity:1;visibility:visible}
.drawer{
position:fixed;top:0;right:0;height:100%;width:min(560px,100%);z-index:60;
background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;
transform:translateX(100%);
transition:transform .42s cubic-bezier(.22,1,.28,1), box-shadow .42s var(--ease);
}
.drawer.on{box-shadow:-24px 0 60px -30px rgba(8,10,14,.7)}
.drawer.on{transform:translateX(0)}
@media (prefers-reduced-motion:reduce){ .drawer,.scrim{transition:none} }
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.25rem;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:1.05rem;font-weight:700}
.cart-back-btn{
display:inline-flex;align-items:center;gap:.35rem;
padding:.35rem .65rem;border:0;border-radius:999px;
background:var(--surface-2);color:var(--text);
font-size:.8rem;font-weight:600;cursor:pointer;
transition:background .18s var(--ease);
}
.cart-back-btn:hover{background:var(--line-strong)}
.cart-back-btn .icon{transform:rotate(180deg);font-size:.85rem}
.drawer-body{flex:1;overflow-y:auto;padding:.5rem 1.25rem;display:flex;flex-direction:column}
.line{display:flex;gap:.8rem;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line .logo,.line .logo-g{width:40px;height:40px;border-radius:10px;flex:none}
.line-info{flex:1;min-width:0}
.line-info b{display:block;font-size:.9rem;font-weight:600}
.line-info span{font-size:.8rem;color:var(--muted)}
.qty{display:flex;align-items:center;gap:.15rem;border:1px solid var(--line-strong);border-radius:999px;padding:.15rem;flex:none}
.qty button{width:26px;height:26px;border:0;background:transparent;border-radius:999px;cursor:pointer;display:grid;place-items:center;font-size:.85rem}
.qty button:hover{background:var(--surface-2)}
.qty span{min-width:20px;text-align:center;font-size:.85rem;font-weight:600}
.drawer-foot{padding:.6rem 1.25rem .7rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.4rem;flex-shrink:0}
.total{display:flex;justify-content:space-between;align-items:center;font-weight:700}
.total span{font-size:.82rem;color:var(--muted);font-weight:500}
.drawer-foot .btn-block{padding:.48rem .85rem;font-size:.86rem;min-height:36px;border-radius:10px}
.drawer-foot .btn-sm{padding:.25rem .5rem;font-size:.78rem;min-height:26px;border-radius:6px}
.b-note-tengah#foot-note{font-size:.7rem;line-height:1.2;color:var(--muted);margin:0;text-align:center}
.cart-empty{margin:auto;text-align:center;color:var(--muted);padding:2rem 0}
.cart-empty .icon{font-size:2rem;margin:0 auto .6rem;color:var(--line-strong)}
/* ---------- keranjang mengambang ---------- */
.fab{
position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:45;
display:inline-flex;align-items:center;gap:.55rem;
padding:.72rem 1.1rem;border:0;border-radius:999px;cursor:pointer;
background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:.92rem;
box-shadow:0 14px 34px -12px rgba(20,22,26,.55);
opacity:0;transform:translateY(16px) scale(.94);pointer-events:none;
transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.fab.on{opacity:1;transform:none;pointer-events:auto}
.fab:active{transform:scale(.96)}
.fab .icon{font-size:1.15rem}
.fab-n{
min-width:22px;padding:.05rem .4rem;border-radius:999px;text-align:center;
background:color-mix(in srgb,var(--accent-ink) 20%,transparent);font-size:.82rem;
}
.fab-t{display:none}
@media (min-width:520px){ .fab-t{display:inline} }
@media (prefers-reduced-motion:reduce){ .fab{transition:none} }
/* ---------- transisi tampilan dan isi laci ---------- */
@media (prefers-reduced-motion:no-preference){
.view.swap{animation:viewIn .34s var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.drawer.on .line{animation:lineIn .36s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes lineIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
}
/* ---------- reveal ---------- */
@media (prefers-reduced-motion:no-preference){
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
}
/* ---------- toast ---------- */
.toast{
position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
z-index:120;max-width:min(92vw,420px);padding:.7rem 1.1rem;
border-radius:12px;background:var(--surface);color:var(--text);
border:1px solid var(--line-strong);box-shadow:var(--shadow);
font-size:.9rem;font-weight:600;line-height:1.4;text-align:center;
animation:toastIn .3s var(--ease) both;
}
.toast.ok{color:#16A34A}
.toast.err{color:#DC2626}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}
/* =========================================================================
LAPIS PREMIUM
Ditaruh paling akhir supaya menang urutan tanpa mengubah aturan di atas.
Semua yang dipakai di sini ada di dalam berkas — tidak ada satu pun
permintaan ke server luar, karena halaman ini harus tetap utuh walau
dibuka dari berkas lokal.
========================================================================= */
/* ---------- huruf ----------
Plus Jakarta Sans, variabel 400–800, subset latin (27 KB). Dibuat
Tokotype untuk identitas kota Jakarta — dipilih bukan cuma karena
bentuknya bagus, tapi karena tokonya toko Indonesia. */
@font-face{
font-family:'Jakarta';
src:url(data:font/woff2;base64,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) format('woff2');
font-weight:400 800;
font-style:normal;
font-display:swap;
}
body{
font-family:'Plus Jakarta Sans','Jakarta',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
letter-spacing:-.011em;
}
/* Angka rupiah pakai lebar tetap supaya kolom harga tidak goyang
saat daftar difilter. */
.pr,.total b,.salin-isi,#cart-total,#bayar-nominal,.fab-t,.cart-count,.qty span{
font-variant-numeric:tabular-nums;
}
h1,h2,h3{text-wrap:balance}
p,.b-note,.sec-head p{text-wrap:pretty}
.hero h1{font-size:clamp(2.3rem,5.4vw,3.9rem);letter-spacing:-.045em;font-weight:800;line-height:1.03}
.hero p{font-size:clamp(1.02rem,1.7vw,1.18rem);max-width:44ch}
.sec-head h2{font-size:clamp(1.85rem,4.2vw,2.9rem);letter-spacing:-.04em}
.card h3{letter-spacing:-.022em}
/* ---------- neutral hangat ----------
Sebelumnya latar krem hangat dipasangkan dengan abu-abu kebiruan.
Dua keluarga abu yang berbeda dalam satu halaman membuat warnanya
terasa "kotor" tanpa orang bisa menunjuk apa salahnya. */
:root{
--muted:#6A6560;
--line:rgba(28,24,20,.10);
--line-strong:rgba(28,24,20,.18);
--surface-2:#EFEDE7;
--shadow:0 1px 2px rgba(40,32,24,.045), 0 18px 44px -26px rgba(37,44,80,.42);
--r-card:20px;
--r-tile:15px;
--ease-halus:cubic-bezier(.32,.72,0,1);
}
:root[data-theme="dark"]{
--muted:#9B968F;
--surface:#15181D;
--surface-2:#1C2027;
--shadow:0 1px 2px rgba(0,0,0,.45), 0 22px 52px -28px rgba(0,0,0,.85);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--muted:#9B968F; --surface:#15181D; --surface-2:#1C2027;
--shadow:0 1px 2px rgba(0,0,0,.45), 0 22px 52px -28px rgba(0,0,0,.85);
}
}
/* ---------- butiran ----------
Lapisan tetap, tidak ikut menggulung, dan tidak bisa diklik. Ditempel
ke elemen yang menggulung, tiap piksel scroll akan digambar ulang dan
ponsel kelas menengah langsung tersendat. */
body::after{
content:"";position:fixed;inset:0;z-index:70;pointer-events:none;
opacity:.028;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::after{mix-blend-mode:screen;opacity:.05}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::after{mix-blend-mode:screen;opacity:.05}}
/* ---------- nav mengambang ----------
Karena navnya melayang dan latarnya tembus, isi halaman terlihat lewat
di atasnya waktu digulung dan kelihatan seperti teks terpotong. Selubung
gradien di belakangnya menyelesaikan itu tanpa menutup navnya. */
.nav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;padding-top:14px}
.nav::before{
content:"";position:absolute;inset:0 0 -44px 0;z-index:-1;pointer-events:none;
background:linear-gradient(to bottom,var(--bg) 0,var(--bg) 64%,color-mix(in srgb,var(--bg) 72%,transparent) 84%,transparent 100%);
}
.nav-in{
height:60px;padding-inline:14px;border-radius:999px;
background:color-mix(in srgb,var(--surface) 78%,transparent);
backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
border:1px solid var(--line);
box-shadow:0 1px 0 color-mix(in srgb,#FFFFFF 55%,transparent) inset, var(--shadow);
transition:box-shadow .5s var(--ease-halus),background .5s var(--ease-halus);
}
:root[data-theme="dark"] .nav-in{box-shadow:0 1px 0 rgba(255,255,255,.06) inset, var(--shadow)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nav-in{box-shadow:0 1px 0 rgba(255,255,255,.06) inset, var(--shadow)}}
section[id]{scroll-margin-top:104px}
/* ---------- kartu bertingkat ----------
Cangkang luar + inti dalam dengan radius sepusat, jadi kartunya terasa
seperti benda yang dipasang di dudukan, bukan kotak berbatas garis. */
.card{
position:relative;background:var(--surface-2);padding:7px;
border-color:transparent;
transition:transform .5s var(--ease-halus),box-shadow .5s var(--ease-halus);
}
.card::before{
content:"";position:absolute;inset:7px;border-radius:calc(var(--r-card) - 7px);
background:var(--surface);border:1px solid var(--line);
box-shadow:inset 0 1px 0 color-mix(in srgb,#FFFFFF 70%,transparent);
}
:root[data-theme="dark"] .card::before{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .card::before{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}}
.card > *{position:relative;z-index:1}
.card-top{padding:.55rem .6rem 0}
.vars{padding:0 .6rem .55rem}
.card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(40,32,24,.05), 0 26px 54px -28px rgba(37,44,80,.5)}
@media (prefers-reduced-motion:reduce){.card:hover{transform:none}}
.logo,.logo-g{width:44px;height:44px}
.var{background:var(--surface-2);border-color:transparent}
.var:hover{background:color-mix(in srgb,var(--accent-soft) 60%,var(--surface-2))}
/* ---------- tombol ---------- */
.btn{transition:transform .4s var(--ease-halus),background .3s var(--ease-halus),border-color .3s var(--ease-halus),box-shadow .3s var(--ease-halus);min-height:44px}
.btn:active{transform:scale(.975) translateY(0)}
.btn-primary{box-shadow:0 8px 22px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
/* Ikon di dalam tombol utama duduk di lingkarannya sendiri — detail kecil
yang memisahkan tombol rakitan dari tombol bawaan kerangka kerja. */
.btn-primary .icon{
box-sizing:content-box;padding:.34em;border-radius:999px;
background:color-mix(in srgb,var(--accent-ink) 20%,transparent);
transition:transform .4s var(--ease-halus),background .3s var(--ease-halus);
}
.btn-primary:hover .icon{transform:scale(1.06);background:color-mix(in srgb,var(--accent-ink) 30%,transparent)}
.btn-primary:disabled .icon{background:color-mix(in srgb,var(--accent-ink) 14%,transparent)}
.addv{transition:transform .35s var(--ease-halus),background .25s var(--ease-halus)}
.addv:active{transform:scale(.88)}
/* ---------- jarak & ritme ---------- */
.sec{padding:clamp(4rem,8.5vw,7rem) 0}
.sec-head{margin-bottom:clamp(2rem,4vw,3rem)}
.hero{padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(2.5rem,5vw,4rem)}
.grid{gap:18px}
.wrap{max-width:1220px}
/* label kecil di atas judul bagian */
.eyebrow{
display:inline-block;margin-bottom:.9rem;padding:.3rem .7rem;border-radius:999px;
font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--accent);background:var(--accent-soft);
border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
}
/* ---------- gerak ----------
Muncul dengan sedikit kabur dan berjenjang, bukan semuanya sekaligus.
Hanya transform dan opacity yang dianimasikan supaya tidak memicu
perhitungan tata letak ulang tiap bingkai. */
@media (prefers-reduced-motion:no-preference){
.rv{
opacity:0;transform:translateY(26px);filter:blur(6px);
transition:opacity .85s var(--ease-halus),transform .85s var(--ease-halus),filter .85s var(--ease-halus);
}
.rv.in{opacity:1;transform:none;filter:none}
.grid .card{animation:masuk .7s var(--ease-halus) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes masuk{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
/* ---------- laci ---------- */
.drawer{border-left:0;box-shadow:-30px 0 80px -40px rgba(37,44,80,.55)}
.drawer-head{padding-block:1.3rem}
.mtd{transition:background .35s var(--ease-halus),color .35s var(--ease-halus),transform .35s var(--ease-halus)}
.mtd:active{transform:scale(.97)}
.qris{max-width:250px}
/* ---------- lompat ke isi ---------- */
.lewati{
position:fixed;top:8px;left:50%;transform:translate(-50%,-160%);z-index:80;
padding:.6rem 1.1rem;border-radius:999px;font-size:.85rem;font-weight:600;
background:var(--accent);color:var(--accent-ink);
transition:transform .3s var(--ease-halus);
}
.lewati:focus{transform:translate(-50%,0)}
/* =========================================================================
LAPIS 2026
Dimuat paling akhir, sesudah LAPIS PREMIUM, jadi menang urutan tanpa
perlu mengubah satu baris pun aturan di atasnya. Tidak ada permintaan
ke server luar: halaman ini harus tetap utuh dibuka dari berkas lokal.
Arah desain: monokrom, warna dipakai irit.
Tombol dan hal yang bisa ditekan memakai tinta hitam (putih di mode
gelap). Kobalt turun pangkat: cuma untuk logo, keadaan aktif, dan
cincin fokus. Halaman yang semuanya biru terbaca seperti templat
kerangka kerja; halaman yang hitam-putih dengan satu titik warna
terbaca seperti sesuatu yang memang dirancang.
========================================================================= */
/* ---------- 1. warna ----------
oklch menyamakan terang yang DIRASA mata, bukan yang dihitung sRGB.
Praktisnya: abu-abu 60% benar-benar terlihat setengah jalan antara
putih dan hitam, dan warna yang dipudarkan tidak berbelok jadi
keunguan. Nilai heksadesimal lama tetap ada di atas sebagai cadangan;
blok ini cuma jalan kalau peramban paham. */
@supports (color: oklch(50% .1 260)){
:root{
--bg:oklch(98.6% .002 265);
--surface:oklch(100% 0 0);
--surface-2:oklch(96.4% .003 265);
--text:oklch(16% .012 265);
--muted:oklch(50% .012 265);
--line:oklch(16% .012 265 / .11);
--line-strong:oklch(16% .012 265 / .22);
--accent:oklch(52% .208 264);
--accent-ink:oklch(100% 0 0);
--accent-soft:oklch(52% .208 264 / .09);
/* tinta: warna semua yang bisa ditekan */
--tinta:oklch(16% .012 265);
--tinta-atas:oklch(100% 0 0);
--shadow:
0 1px 2px oklch(16% .012 265 / .05),
0 10px 24px -14px oklch(16% .012 265 / .18),
0 30px 64px -36px oklch(16% .012 265 / .26);
}
:root[data-theme="dark"]{
--bg:oklch(14% .01 265);
--surface:oklch(18% .012 265);
--surface-2:oklch(22.5% .014 265);
--text:oklch(97% .004 265);
--muted:oklch(68% .014 265);
--line:oklch(100% 0 0 / .10);
--line-strong:oklch(100% 0 0 / .20);
--accent:oklch(74% .152 264);
--accent-ink:oklch(16% .03 265);
--accent-soft:oklch(74% .152 264 / .15);
--tinta:oklch(97% .004 265);
--tinta-atas:oklch(14% .01 265);
--shadow:
0 1px 2px oklch(0% 0 0 / .5),
0 12px 28px -16px oklch(0% 0 0 / .75),
0 40px 80px -44px oklch(0% 0 0 / .9);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--bg:oklch(14% .01 265);
--surface:oklch(18% .012 265);
--surface-2:oklch(22.5% .014 265);
--text:oklch(97% .004 265);
--muted:oklch(68% .014 265);
--line:oklch(100% 0 0 / .10);
--line-strong:oklch(100% 0 0 / .20);
--accent:oklch(74% .152 264);
--accent-ink:oklch(16% .03 265);
--accent-soft:oklch(74% .152 264 / .15);
--tinta:oklch(97% .004 265);
--tinta-atas:oklch(14% .01 265);
--shadow:
0 1px 2px oklch(0% 0 0 / .5),
0 12px 28px -16px oklch(0% 0 0 / .75),
0 40px 80px -44px oklch(0% 0 0 / .9);
}
}
}
/* cadangan untuk peramban lama, supaya tombol tetap punya warna */
:root{--tinta:#14161A;--tinta-atas:#FFFFFF}
:root[data-theme="dark"]{--tinta:#ECEEF2;--tinta-atas:#0E1014}
:root{
--r-card:18px; --r-tile:13px; --r-input:12px;
--ease-halus:cubic-bezier(.32,.72,0,1);
--ease-pegas:cubic-bezier(.22,1.02,.36,1);
}
::selection{background:var(--tinta);color:var(--tinta-atas)}
:root{accent-color:var(--accent)}
/* Latar dipasang di elemen akar, bukan di body: body dipersempit oleh
batang penggulung, dan pita selebar batang itu akan tertinggal polos
di tepi kanan. */
html{background:var(--bg)}
/* Butiran dan cahaya sekitar dari lapis lama dimatikan. Halaman
monokrom hidup dari kontras, bukan dari tekstur yang menumpuk. */
body::after{opacity:.02}
:root[data-theme="dark"] body::after{opacity:.035}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::after{opacity:.035}}
/* ---------- 2. huruf ----------
Satu keluarga huruf. Hierarki dibangun dari berat, ukuran, dan warna,
bukan dari menambah jenis huruf kedua. Makin besar ukurannya, makin
rapat jaraknya: huruf besar memang terlihat lebih renggang pada
jarak yang sama. */
.hero h1{
font-size:clamp(3rem,8.2vw,6.1rem);
line-height:.94;
letter-spacing:-.055em;
font-weight:800;
max-width:15ch;
margin-bottom:1.4rem;
}
.hero h1 em{
font-style:normal;color:var(--accent);
text-decoration:underline;
text-decoration-thickness:.05em;
text-underline-offset:.1em;
text-decoration-color:color-mix(in oklab,var(--accent) 30%,transparent);
}
.hero p{
font-size:clamp(1.08rem,1.5vw,1.28rem);
line-height:1.55;max-width:52ch;color:var(--muted);
margin-bottom:2.2rem;
}
.sec-head h2{
font-size:clamp(2.1rem,5vw,3.6rem);
letter-spacing:-.05em;line-height:1;font-weight:800;
}
.sec-head p{font-size:1.05rem;line-height:1.6;max-width:56ch;margin-top:1rem}
.card h3{font-size:1.05rem;letter-spacing:-.028em;font-weight:700}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
/* Semua angka pakai lebar tetap. Kolom harga yang bergoyang tiap kali
daftar disaring adalah tanda paling cepat bahwa sebuah toko dirakit
asal-asalan. */
.pr,.total b,.salin-isi,.fab-t,.cart-count,.qty span,.tally,#cart-total,#bayar-nominal{
font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1;
}
/* Label kecil di atas judul: garis rambut + teks, tanpa pil berwarna.
Pil kecil di atas tiap judul adalah pola yang sudah dipakai setiap
templat. */
.eyebrow{
display:inline-flex;align-items:center;gap:.65rem;
margin-bottom:1.3rem;padding:0;border:0;border-radius:0;
background:none;color:var(--muted);
font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--accent);flex:none}
/* ---------- 3. ritme halaman ---------- */
.wrap{max-width:1280px;padding-inline:24px}
.sec{padding:clamp(5rem,11vw,9.5rem) 0}
.sec-head{margin-bottom:clamp(2.5rem,5vw,4rem);max-width:none}
section[id]{scroll-margin-top:110px}
/* ---------- 4. hero: satu kolom, dipimpin huruf ----------
Mosaik logo dikeluarkan dari hero dan jadi pita sendiri di bawahnya.
Hero yang dibelah dua membuat judulnya harus mengalah pada gambar;
di sini judulnya yang bekerja. */
.hero{padding:clamp(4rem,10vw,8rem) 0 clamp(2.5rem,5vw,4rem)}
.hero-grid{display:block}
#view-apps .hero-grid{max-width:none}
.hero-cta{gap:.85rem;align-items:center}
/* pita logo: apa saja yang dijual, dalam satu tarikan napas.
Bergerak dengan menggeser satu jalur yang isinya digandakan, jadi
sambungannya tidak pernah terlihat. */
.pita-band{
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
padding:clamp(1.5rem,3vw,2.25rem) 0;overflow:hidden;
background:var(--surface);
}
.pita{
overflow:hidden;
/* Tepi kiri dan kanan dibuat memudar supaya pitanya terasa menerus,
bukan terpotong oleh tepi layar. Selubungnya dipasang di wadah yang
diam, bukan di jalur yang bergerak — kalau tidak, tepi pudarnya
ikut berjalan. */
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.pita-jalur{
display:flex;width:max-content;
gap:clamp(1.5rem,3vw,2.75rem);padding-inline:clamp(.75rem,1.5vw,1.4rem);
}
.pita img{
width:clamp(40px,4.4vw,54px);height:clamp(40px,4.4vw,54px);
border-radius:12px;background:#FFFFFF;border:1px solid var(--line);
object-fit:cover;flex:none;
/* Logonya dibiarkan berwarna. Halaman ini monokrom di mana-mana, jadi
pita inilah satu-satunya tempat warna muncul — dan warna itu bukan
hiasan: orang mencari merek yang dikenalnya, dan merek dikenali
dari warnanya sebelum dari bentuknya. */
box-shadow:0 2px 6px -4px oklch(16% .012 265 / .35);
}
@media (prefers-reduced-motion:no-preference){
.pita.jalan .pita-jalur{animation:pitaGeser 46s linear infinite}
.pita.jalan:hover .pita-jalur{animation-play-state:paused}
@keyframes pitaGeser{from{transform:translateX(0)}to{transform:translateX(-50%)}}
}
/* Tanpa gerak, pitanya tetap terbaca: satu baris logo yang bisa
digeser jari. */
@media (prefers-reduced-motion:reduce){
.pita{overflow-x:auto;scrollbar-width:none}
.pita::-webkit-scrollbar{display:none}
}
/* ---------- 5. nav ---------- */
.nav-in{
height:60px;padding-inline:10px;
background:color-mix(in oklab,var(--surface) 74%,transparent);
backdrop-filter:blur(22px) saturate(180%);
-webkit-backdrop-filter:blur(22px) saturate(180%);
border:1px solid var(--line);
box-shadow:inset 0 1px 0 color-mix(in oklab,#FFFFFF 55%,transparent),var(--shadow);
}
:root[data-theme="dark"] .nav-in{box-shadow:inset 0 1px 0 oklch(100% 0 0 / .06),var(--shadow)}
.brand{font-size:1.02rem;letter-spacing:-.035em;font-weight:800}
.brand-mark{width:31px;height:31px;border-radius:10px}
/* Penunjuk yang MENGGESER dari satu tab ke tab lain. Warna yang lompat
begitu saja membuat orang kehilangan jejak tab mana yang tadi aktif;
yang menggeser menceritakan perpindahannya. */
.seg{position:relative;border-color:transparent;background:var(--surface-2);padding:4px;gap:0}
.seg::before{
content:"";position:absolute;z-index:0;top:4px;bottom:4px;left:0;
width:var(--seg-w,0px);transform:translateX(var(--seg-x,0px));
border-radius:999px;background:var(--tinta);
transition:transform .5s var(--ease-halus),width .5s var(--ease-halus);
}
.seg:not(.siap)::before{opacity:0}
.seg button{position:relative;z-index:1;font-weight:650;transition:color .3s var(--ease-halus)}
.seg button[aria-current="page"]{background:transparent;color:var(--tinta-atas)}
@media (prefers-reduced-motion:reduce){.seg::before{transition:none}}
.iconbtn{
border-color:var(--line);
background:color-mix(in oklab,var(--surface-2) 55%,transparent);
transition:background .3s var(--ease-halus),border-color .3s var(--ease-halus),transform .3s var(--ease-halus);
}
.iconbtn:hover{border-color:var(--line-strong);background:var(--surface-2)}
.iconbtn:active{transform:scale(.94)}
/* Garis kemajuan gulir digerakkan linimasa gulir peramban sendiri,
bukan pendengar peristiwa scroll: tidak ada satu baris JavaScript pun
yang jalan tiap bingkai. */
@supports (animation-timeline: scroll()){
@media (prefers-reduced-motion:no-preference){
.nav::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
transform-origin:0 50%;pointer-events:none;background:var(--accent);
animation:gulir linear both;animation-timeline:scroll(root block);
}
@keyframes gulir{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
}
/* ---------- 6. tombol: tinta, bukan biru ---------- */
.btn{
font-weight:650;letter-spacing:-.015em;padding:.85rem 1.4rem;font-size:.96rem;
transition:
transform .45s var(--ease-pegas),
background .3s var(--ease-halus),
border-color .3s var(--ease-halus),
box-shadow .35s var(--ease-halus),
opacity .3s var(--ease-halus);
;min-height:44px}
.btn-primary{
background:var(--tinta);color:var(--tinta-atas);
box-shadow:inset 0 1px 0 color-mix(in oklab,#FFFFFF 18%,transparent),var(--shadow);
}
.btn-primary:hover{background:color-mix(in oklab,var(--tinta) 88%,var(--muted))}
.btn-primary:active{transform:scale(.972)}
.btn-primary:disabled:hover{background:var(--tinta)}
/* Ikon di dalam tombol utama duduk di lingkarannya sendiri. Detail
kecil yang memisahkan tombol rakitan dari tombol bawaan kerangka. */
.btn-primary .icon{background:color-mix(in oklab,var(--tinta-atas) 18%,transparent)}
.btn-primary:hover .icon{background:color-mix(in oklab,var(--tinta-atas) 28%,transparent)}
.btn-ghost{
border-color:var(--line-strong);
background:color-mix(in oklab,var(--surface) 55%,transparent);
}
.btn-ghost:hover{border-color:var(--text);background:var(--surface)}
:where(a,button,input,summary):focus-visible{
outline:2px solid var(--accent);outline-offset:3px;border-radius:10px;
}
/* ---------- 7. baris jaminan ----------
Dipadatkan jadi satu baris tipis. Tiga kotak besar berisi janji
layanan menahan orang terlalu lama sebelum sampai ke katalog, padahal
yang mereka cari produknya. Janjinya tetap ada, ukurannya yang
diturunkan sesuai bobotnya. */
.assure{background:transparent;border-color:var(--line)}
.assure li{gap:.7rem;align-items:baseline}
@media (min-width:760px){
.assure li{padding-block:1.15rem;padding-inline:1.5rem}
.assure li:first-child{padding-left:0}
}
.assure .icon{
font-size:.95rem;color:var(--muted);flex:none;
padding:0;border-radius:0;background:none;
transform:translateY(.12em);
}
.assure div{display:flex;flex-wrap:wrap;gap:.15rem .5rem;align-items:baseline}
.assure b{display:inline;font-size:.86rem;letter-spacing:-.015em;margin:0}
.assure span{font-size:.86rem;line-height:1.45}
/* ---------- 8. katalog: rel kategori + daftar harga ----------
Susunan lama — cari dan kategori melintang di atas, lalu kisi kartu —
memaksa mata bolak-balik antara penyaring dan hasilnya. Di layar lebar
penyaringnya sekarang jadi rel tegak yang menempel di kiri: kategori
selalu terlihat, hasilnya berganti di sebelahnya, dan tidak ada lagi
menggulung ke atas cuma untuk pindah kategori.
Di bawah 1000px rel ini kembali jadi baris melintang, karena kolom
selebar 224px di layar ponsel berarti hasilnya tinggal separuh layar. */
.tools{gap:1rem;margin-bottom:2rem}
.search{max-width:440px}
@media (min-width:1000px){
#katalog .wrap{
display:grid;
grid-template-columns:224px minmax(0,1fr);
column-gap:clamp(2.5rem,4vw,4rem);
align-items:start;
}
#katalog .sec-head{grid-column:1 / -1}
#katalog .tools{
grid-column:1;grid-row:2 / span 3;
position:sticky;top:104px;
margin-bottom:0;padding-right:.5rem;
}
#katalog .tally{grid-column:2;grid-row:2;margin-bottom:.75rem}
#katalog .grid{grid-column:2;grid-row:3}
#katalog .empty{grid-column:2;grid-row:4}
#katalog .search{max-width:none}
#katalog .search input{border-radius:var(--r-input)}
/* Kategori jadi daftar tegak. Yang aktif ditandai garis tebal di tepi
kiri, bukan pil berwarna: dalam satu kolom, garis lebih cepat
dibaca sebagai "kamu di sini". */
#katalog .chips{
flex-direction:column;align-items:stretch;gap:1px;
overflow:visible;padding-bottom:0;
border-left:1px solid var(--line);
}
#katalog .chip{
border:0;border-radius:0;background:none;
text-align:left;padding:.5rem .9rem;
box-shadow:inset 2px 0 0 transparent;
transition:box-shadow .3s var(--ease-halus),color .3s var(--ease-halus),background .3s var(--ease-halus);
}
#katalog .chip:hover{background:var(--surface-2);color:var(--text);transform:none}
#katalog .chip[aria-pressed="true"]{
background:none;color:var(--text);
box-shadow:inset 2px 0 0 var(--text);
}
}
.search input{
border-radius:999px;padding-block:.85rem;
background:var(--surface);border-color:var(--line-strong);
transition:border-color .25s var(--ease-halus),box-shadow .25s var(--ease-halus);
}
.search input:focus{border-color:var(--text);outline:none;box-shadow:0 0 0 4px var(--surface-2)}
.chip{
border-color:var(--line);
background:color-mix(in oklab,var(--surface) 65%,transparent);
transition:
background .25s var(--ease-halus),color .25s var(--ease-halus),
border-color .25s var(--ease-halus),transform .25s var(--ease-pegas);
}
.chip:hover{background:var(--surface);border-color:var(--line-strong);color:var(--text)}
.chip:active{transform:scale(.96)}
.chip[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--tinta-atas)}
.tally{font-size:.84rem;margin-bottom:1.5rem}
/* ---------- 9. produk: daftar harga, bukan kisi kartu ----------
51 produk hanya punya 69 varian — artinya sebagian besar produk cuma
punya SATU pilihan durasi. Membungkus satu baris harga di dalam kartu
berbingkai memakai ruang tiga kali lipat dari isinya, dan tinggi
kartu yang berbeda-beda membuat kisinya bergerigi.
Jadi kartunya dibongkar jadi baris daftar: nama di kiri, semua
pilihan durasi berjajar di kanan. Satu layar sekarang memuat kira-kira
dua kali lebih banyak produk, dan harganya bisa dibandingkan dengan
menyapu mata ke bawah satu kolom. */
.grid{display:block;gap:0;border-top:1px solid var(--line)}
.card{
display:grid;grid-template-columns:1fr;
background:transparent;border:0;border-radius:12px;
border-bottom:1px solid var(--line);
padding:.9rem 0;gap:.15rem;
transition:background .3s var(--ease-halus);
}
.card::before,.card::after{content:none}
.card:hover{transform:none;box-shadow:none}
@media (hover:hover){
/* Sorotan baris dibuat melebar ke luar batas isi supaya barisnya
terasa satu benda utuh, bukan kotak yang mengambang di tengah. */
.card:hover{background:var(--surface-2);padding-inline:12px;margin-inline:-12px}
}
.card-top{padding:0;gap:.8rem;align-items:center}
.logo,.logo-g{width:38px;height:38px;border-radius:10px}
.card h3{line-height:1.3}
.card .cat{font-size:.76rem}
.vars{padding:0;gap:0}
@media (min-width:640px){
.card{
/* Kolom durasi dibatasi lebarnya, kolom nama yang menyerap sisa
ruang. Kalau dibalik, angka rupiah terlempar jauh ke tepi kanan
dan mata harus menyeberangi ruang kosong untuk mencocokkan harga
dengan durasinya. */
grid-template-columns:minmax(190px,1fr) minmax(0,480px);
align-items:center;column-gap:clamp(1.5rem,3vw,2.75rem);
padding:.75rem 0;
}
.card-top{align-self:center}
}
/* Baris varian: tanpa kotak, dipisah garis rambut. Tombol tambahnya
baru menyala penuh saat barisnya disentuh. */
.var{
background:transparent;border:0;border-radius:8px;
padding:.5rem .35rem .5rem .5rem;
transition:background .25s var(--ease-halus);
}
.var + .var{box-shadow:inset 0 1px 0 var(--line)}
.var:hover{background:var(--surface);box-shadow:none}
.var:hover + .var{box-shadow:none}
.var .lab{font-size:.85rem;color:var(--muted)}
.var .pr{font-size:1rem;font-weight:700;letter-spacing:-.03em;color:var(--text)}
.addv{
width:28px;height:28px;
background:var(--surface-2);color:var(--text);
transition:background .25s var(--ease-halus),color .25s var(--ease-halus),transform .3s var(--ease-pegas);
}
.card:hover .addv{background:color-mix(in oklab,var(--text) 12%,transparent)}
.var:hover .addv,.addv:hover{background:var(--tinta);color:var(--tinta-atas)}
.addv.added{background:var(--tinta);color:var(--tinta-atas);border-color:transparent}
.pil{border-radius:5px;font-size:.6rem;letter-spacing:.07em;padding:.1rem .32rem}
.empty{border-style:solid;border-color:var(--line);background:transparent;border-radius:var(--r-card);padding:4.5rem 1.5rem}
/* ---------- 10. jasa digital: bento ---------- */
.bento{gap:16px}
.b{border-radius:var(--r-card);padding:1.85rem;transition:transform .5s var(--ease-halus),box-shadow .5s var(--ease-halus)}
@media (hover:hover){.b:hover{transform:translateY(-3px);box-shadow:var(--shadow)}}
@media (prefers-reduced-motion:reduce){.b:hover{transform:none}}
.b-ico{
font-size:1.15rem;color:var(--text);
box-sizing:content-box;padding:.6rem;border-radius:12px;
background:var(--surface-2);width:1.15rem;height:1.15rem;margin-bottom:.4rem;
}
.b h3{font-size:1.2rem;letter-spacing:-.035em}
/* Kartu utama jadi tinta, bukan biru. Satu blok gelap di halaman terang
bekerja jauh lebih keras daripada satu blok biru. */
.b1{
color:oklch(97% .004 265);border-color:transparent;
background:
radial-gradient(105% 90% at 6% -12%, color-mix(in oklab,var(--accent) 42%,transparent) 0%, transparent 55%),
oklch(17% .015 265);
box-shadow:0 34px 74px -44px oklch(16% .012 265 / .8);
}
.b1 h3{color:#FFFFFF;font-size:1.5rem}
.b1 .b-ico{background:oklch(100% 0 0 / .12);color:#FFFFFF}
.b1 p{color:oklch(97% .004 265 / .78)}
.b1 .b-list li,.b1 .b-list .icon{color:#FFFFFF}
.b1 .b-note{color:oklch(97% .004 265 / .62)}
.b1 .btn-primary{background:#FFFFFF;color:oklch(17% .015 265)}
.b1 .btn-primary:hover{background:oklch(92% .006 265)}
.b1 .btn-primary .icon{background:oklch(17% .015 265 / .12)}
/* Kartu ketiga dibedakan lewat kisi titik yang nyaris tak terlihat.
Garis serong berulang yang dulu dipakai membuatnya terbaca seperti
area yang dinonaktifkan, bukan kartu yang setara. */
.b3{background:radial-gradient(var(--line) .9px, transparent .9px) 0 0 / 16px 16px, var(--surface)}
/* ---------- 11. alur pesan: garis waktu tegak ----------
Tiga kolom berdampingan menyuruh mata membaca menyamping, padahal
isinya urutan waktu. Ditegakkan jadi garis waktu: angka besar di
kiri, isinya di kanan, tersambung satu garis dari langkah satu sampai
tiga. Urutannya jadi terbaca sebagai urutan. */
.flow{grid-template-columns:1fr;gap:0;max-width:920px;counter-reset:step}
.flow li{
display:grid;grid-template-columns:auto minmax(0,1fr);
gap:0 clamp(1.25rem,3vw,2.5rem);
padding:clamp(1.75rem,3.5vw,2.5rem) 0;
border-top:1px solid var(--line);
}
.flow li:last-child{border-bottom:1px solid var(--line)}
.flow li::before{
position:static;width:auto;height:auto;padding:0;border-radius:0;
background:none;color:var(--muted);
font-size:clamp(2.6rem,6vw,4.2rem);font-weight:800;
letter-spacing:-.07em;line-height:.85;
grid-row:1 / span 2;align-self:start;
min-width:1.6ch;text-align:right;
font-variant-numeric:tabular-nums;
}
.flow li::after{content:none}
.flow h3{font-size:clamp(1.1rem,2vw,1.4rem);letter-spacing:-.035em;margin:0 0 .5rem;align-self:center}
.flow p{font-size:.98rem;line-height:1.62;max-width:62ch}
/* ---------- 12. faq ----------
Jawaban dibuka dengan tinggi yang dianimasikan lewat
::details-content. Tinggi "auto" dulu tidak bisa dianimasikan sama
sekali; interpolate-size membuka itu tanpa satu baris JS. */
.faq{border-top:1px solid var(--line)}
/* Judul bagian menempel di kiri sementara pertanyaannya digulung di
kanan. Sembilan pertanyaan yang membentang selebar layar membuat
orang lupa sedang membaca bagian apa begitu sampai di tengah. */
@media (min-width:960px){
#faq .wrap,#view-jasa .faq-2kolom{
display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);
column-gap:clamp(3rem,6vw,6rem);align-items:start;
}
#faq .sec-head{position:sticky;top:110px;margin-bottom:0}
#faq .faq{border-top:0}
#faq .faq details:first-of-type{border-top:1px solid var(--line)}
}
.faq summary{padding:1.45rem 0;font-weight:650;letter-spacing:-.022em;font-size:1.05rem}
.faq summary:hover{color:var(--muted)}
.faq summary .icon{transition:transform .4s var(--ease-halus);flex:none}
.faq p{padding-bottom:1.5rem;line-height:1.65}
@supports (interpolate-size: allow-keywords){
@media (prefers-reduced-motion:no-preference){
:root{interpolate-size:allow-keywords}
.faq details::details-content{
block-size:0;overflow:clip;opacity:0;
transition:block-size .45s var(--ease-halus),opacity .35s var(--ease-halus),content-visibility .45s allow-discrete;
}
.faq details[open]::details-content{block-size:auto;opacity:1}
}
}
/* ---------- 13. pita ajakan + kaki ---------- */
.band{
border-radius:24px;border-color:transparent;
padding:clamp(2.5rem,6vw,4.25rem);
background:oklch(17% .015 265);color:oklch(97% .004 265);
box-shadow:var(--shadow);
}
.band h2{font-size:clamp(1.75rem,4vw,2.7rem);letter-spacing:-.045em;color:#FFFFFF}
.band p{color:oklch(97% .004 265 / .72)}
.band .btn-primary{background:#FFFFFF;color:oklch(17% .015 265)}
.band .btn-primary:hover{background:oklch(92% .006 265)}
.band .btn-primary .icon{background:oklch(17% .015 265 / .12)}
footer{border-top:1px solid var(--line);padding:clamp(3.5rem,7vw,5rem) 0 2.5rem}
.foot nav a{position:relative;transition:color .25s var(--ease-halus)}
.foot nav a::after{
content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
background:currentColor;transform:scaleX(0);transform-origin:0 50%;
transition:transform .4s var(--ease-halus);
}
.foot nav a:hover::after{transform:scaleX(1)}
.copy{margin-top:2.5rem;font-size:.81rem}
/* ---------- 14. keranjang & bayar ---------- */
.drawer{width:min(560px,100%);background:var(--surface);box-shadow:-40px 0 90px -50px oklch(0% 0 0 / .6)}
.drawer-body{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.drawer-head{padding:1.35rem}
.drawer-head h2{font-size:1.1rem;letter-spacing:-.035em}
.drawer-body,.drawer-foot{padding-inline:1.25rem}
.line{padding:.65rem 0}
.line-info b{font-size:.88rem;letter-spacing:-.02em}
.metode{border-color:transparent;background:var(--surface-2);padding:3px;gap:2px}
.mtd{font-size:.8rem;font-weight:650}
.mtd.on{background:var(--tinta);color:var(--tinta-atas)}
.total b{font-size:1.05rem;letter-spacing:-.02em}
.salin-baris{background:var(--surface-2);border-color:transparent}
.nominal{border-color:var(--tinta);background:var(--surface-2);border-radius:var(--r-input);padding:2px}
.isian input:focus{background:var(--surface);border-color:var(--text);box-shadow:0 0 0 3px var(--surface-2)}
.langkah li::before{background:var(--surface-2);color:var(--text)}
.sukses .icon{color:var(--text)}
.qris{border-radius:12px}
.fab{
padding:.82rem 1.2rem;font-weight:700;
background:var(--tinta);color:var(--tinta-atas);
box-shadow:inset 0 1px 0 color-mix(in oklab,var(--tinta-atas) 18%,transparent),var(--shadow);
}
.fab-n{background:color-mix(in oklab,var(--tinta-atas) 20%,transparent)}
.tertunda{
border-radius:var(--r-tile);border-color:var(--line-strong);
background:color-mix(in oklab,var(--surface) 94%,transparent);
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
box-shadow:var(--shadow);
}
.tertunda-judul{color:var(--text)}
/* ---------- 15. gerak ----------
Muncul berjenjang, sedikit naik, tanpa efek kabur. Blur pada elemen
besar memaksa kartu grafis menggambar ulang seluruh lapisan tiap
bingkai, dan itu yang bikin HP kelas menengah tersendat. */
@media (prefers-reduced-motion:no-preference){
.rv{opacity:0;transform:translateY(24px);filter:none;
transition:opacity .8s var(--ease-halus),transform .8s var(--ease-halus)}
.rv.in{opacity:1;transform:none}
.grid .card{animation:masuk .6s var(--ease-halus) both;animation-delay:calc(var(--i,0) * 38ms)}
@keyframes masuk{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.view.swap{animation:viewIn .42s var(--ease-halus) both}
}
/* ---------- 16. layar kecil ----------
Semua yang menempel dan melayang dilepas di bawah 768px: di layar
sempit semuanya berebut ruang yang sama. */
@media (max-width:767px){
.band{padding:1.9rem}
.hero h1{max-width:none}
.b1 h3{font-size:1.3rem}
/* Di baris produk yang menumpuk, nama dan daftar durasi butuh sedikit
jarak supaya tidak terbaca sebagai satu blok teks. */
.card{padding:1.05rem 0}
.vars{margin-top:.5rem}
.flow li{padding-block:1.5rem}
}
/* =========================================================================
17. KATALOG IKON + LEMBAR VARIAN (Agustus 2026)
Daftar harga memanjang memaksa satu produk memakan tinggi 3-5 baris,
jadi 51 produk berarti menggulung jauh. Sekarang etalase hanya
menampilkan logo + nama, seperti laci aplikasi di ponsel: satu layar
memuat 20 produk, bukan 4. Pilihan durasi dan harga pindah ke lembar
yang muncul saat produknya disentuh, karena harga baru relevan setelah
orang memilih produknya.
========================================================================= */
.grid{
display:grid;border-top:0;
grid-template-columns:repeat(auto-fill,minmax(74px,1fr));
gap:4px 2px;
}
.app{
display:flex;flex-direction:column;align-items:center;gap:.5rem;
padding:.85rem .35rem .9rem;
background:none;border:1px solid transparent;border-radius:18px;
cursor:pointer;text-align:center;width:100%;
transition:background .28s var(--ease-halus),border-color .28s var(--ease-halus),transform .28s var(--ease-pegas);
}
.app:hover{background:var(--surface);border-color:var(--line)}
.app:active{transform:scale(.94)}
.app .logo,.app .logo-g{
width:52px;height:52px;border-radius:15px;
box-shadow:0 1px 2px rgba(20,22,26,.06), 0 10px 22px -14px rgba(20,22,26,.5);
}
/* Tinggi nama dikunci dua baris supaya harga semua produk berdiri di
garis yang sama; tanpa ini kisi terbaca bergerigi. */
.app .nm{
font-size:.74rem;line-height:1.25;font-weight:600;letter-spacing:-.015em;
min-height:calc(2 * 1.25em);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Harga jangan sampai patah dua baris: kisi jadi bergerigi dan angkanya
susah dibandingkan sekilas. */
.app .hg{
font-size:.7rem;color:var(--muted);letter-spacing:-.025em;
margin-top:-.25rem;white-space:nowrap;
}
@media (min-width:760px){
.grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px 4px}
.app .logo,.app .logo-g{width:58px;height:58px;border-radius:17px}
.app .nm{font-size:.8rem}
.app .hg{font-size:.74rem}
}
/* Lembar varian. Di ponsel naik dari bawah supaya jempol tetap dekat
tombol tambah; di layar lebar jadi dialog tengah. */
.sheet{
position:fixed;left:0;right:0;bottom:0;z-index:80;
max-height:82dvh;display:flex;flex-direction:column;
background:var(--surface);color:var(--text);
border-radius:24px 24px 0 0;
border-top:1px solid var(--line);
box-shadow:0 -30px 80px -40px rgba(8,10,14,.6);
transform:translateY(101%);
transition:transform .44s var(--ease-halus);
}
.sheet.on{transform:none}
.sheet[hidden]{display:none}
.sheet-grip{
width:38px;height:4px;border-radius:99px;background:var(--line-strong);
margin:.6rem auto .2rem;flex:none;
}
.sheet-head{display:flex;align-items:center;gap:.85rem;padding:.7rem 1.25rem 1rem}
.sheet-head .logo,.sheet-head .logo-g{width:46px;height:46px;border-radius:14px;flex:none}
.sheet-head h3{font-size:1.05rem;font-weight:700;letter-spacing:-.03em;line-height:1.25}
.sheet-head .cat{font-size:.78rem;color:var(--muted);margin-top:.1rem}
.sheet-x{
margin-left:auto;flex:none;width:38px;height:38px;border-radius:999px;
display:grid;place-items:center;cursor:pointer;
background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
transition:color .25s var(--ease-halus),border-color .25s var(--ease-halus);
}
.sheet-x:hover{color:var(--text);border-color:var(--line-strong)}
.sheet-body{overflow-y:auto;padding:0 1.25rem 1.25rem;overscroll-behavior:contain}
.sheet-body .vars{gap:0}
.sheet-foot{
padding:.9rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom));
border-top:1px solid var(--line);
display:flex;align-items:center;gap:.9rem;
font-size:.85rem;color:var(--muted);
}
.sheet-foot .btn{margin-left:auto;padding-block:.7rem;min-height:44px}
@media (min-width:760px){
.sheet{
left:50%;right:auto;bottom:auto;top:50%;
width:min(460px,calc(100vw - 3rem));
transform:translate(-50%,-46%) scale(.97);opacity:0;
border-radius:22px;border:1px solid var(--line);
max-height:min(78dvh,680px);
transition:transform .38s var(--ease-halus),opacity .28s var(--ease-halus);
}
.sheet.on{transform:translate(-50%,-50%);opacity:1}
.sheet-grip{display:none}
.sheet-head{padding-top:1.25rem}
}
/* Kontak di hero: tautan, bukan tombol ketiga dan keempat. Dua tombol
penuh lagi di baris yang sama akan mengaburkan mana yang utama. */
.hero-kontak{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;margin-top:1.4rem}
.tautan-kontak{
display:inline-flex;align-items:center;gap:.45rem;
font-size:.9rem;font-weight:600;color:var(--muted);
padding:.3rem 0;border-bottom:1px solid transparent;
transition:color .25s var(--ease-halus),border-color .25s var(--ease-halus);
}
.tautan-kontak .icon{font-size:1.05rem;color:var(--accent)}
.tautan-kontak:hover{color:var(--text);border-bottom-color:var(--text)}
/* Tombol chat mengambang. Duduk di kiri supaya tidak bertumpuk dengan
tombol keranjang di kanan bawah. */
.fab-wa{
position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:70;
display:inline-flex;align-items:center;gap:.5rem;
padding:.7rem .95rem;border-radius:999px;
background:#1FA855;color:#fff;font-size:.86rem;font-weight:650;letter-spacing:-.01em;
box-shadow:0 10px 30px -12px rgba(31,168,85,.85);
transition:transform .3s var(--ease-pegas),box-shadow .3s var(--ease-halus);
}
.fab-wa .icon{font-size:1.15rem}
.fab-wa:hover{transform:translateY(-2px);box-shadow:0 16px 38px -14px rgba(31,168,85,.9)}
.fab-wa:active{transform:scale(.95)}
@media (max-width:400px){
.fab-wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.fab-wa{padding:.8rem}
}
/* Testimoni: kartu kutipan, maksimal tiga baris per orang. */
.ulasan{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.ulas{
background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-card);padding:1.25rem;
}
.ulas p{font-size:.95rem;line-height:1.55}
.ulas-siapa{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.15rem .6rem;align-items:baseline}
.ulas-siapa b{font-size:.9rem;letter-spacing:-.02em}
.ulas-siapa span{font-size:.8rem;color:var(--muted)}
.ulas-gbr{
width:100%;border-radius:12px;border:1px solid var(--line);
margin-bottom:.85rem;background:var(--surface-2);
}
.ulas:has(.ulas-gbr) p{font-size:.9rem;color:var(--muted)}
.ulasan-tegak{grid-template-columns:1fr;gap:14px}
.ulas-judul{
font-size:.9rem;font-weight:700;letter-spacing:-.02em;
margin:1.5rem 0 .75rem;
}
.lihat-semua{margin-top:1.25rem}
.jam{margin-top:.35rem;font-size:.85rem;color:var(--muted)}
/* Latar halaman: dua cahaya lembut beraksen merek di belakang hero dan
katalog supaya halaman tidak terbaca sebagai kertas kosong. Dipasang
di lapisan tetap tanpa pointer, jadi tidak ikut dicat ulang saat
menggulung. */
/* Warna dasar pindah ke supaya lapisan .latar (z-index -1) tidak
tertutup latar sendiri. */
html{background:var(--bg)}
body{background:transparent}
.latar{
position:fixed;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(58rem 40rem at 8% -8%, color-mix(in oklab,var(--accent) 12%,transparent), transparent 62%),
radial-gradient(46rem 34rem at 108% 12%, color-mix(in oklab,var(--accent) 8%,transparent), transparent 60%),
linear-gradient(180deg, transparent 0 58%, color-mix(in oklab,var(--accent) 4%,transparent) 100%);
}
:root[data-theme="dark"] .latar{
background:
radial-gradient(58rem 40rem at 8% -8%, color-mix(in oklab,var(--accent) 20%,transparent), transparent 62%),
radial-gradient(46rem 34rem at 108% 12%, color-mix(in oklab,var(--accent) 13%,transparent), transparent 60%),
linear-gradient(180deg, transparent 0 55%, color-mix(in oklab,var(--accent) 7%,transparent) 100%);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .latar{
background:
radial-gradient(58rem 40rem at 8% -8%, color-mix(in oklab,var(--accent) 20%,transparent), transparent 62%),
radial-gradient(46rem 34rem at 108% 12%, color-mix(in oklab,var(--accent) 13%,transparent), transparent 60%),
linear-gradient(180deg, transparent 0 55%, color-mix(in oklab,var(--accent) 7%,transparent) 100%);
}
}
/* ---------- bekas gaya sebaris ----------
Dipindah ke sini waktu halaman dipecah jadi HTML+CSS+JS. Ditaruh paling
akhir supaya menang urutan persis seperti style="" yang digantikannya. */
.sprite{position:absolute}
#top{position:relative}
#sentinel{position:absolute;top:0;left:0;width:1px;height:420px;pointer-events:none}
.bento-rapat{gap:12px}
.b-rapat{padding:1.15rem}
.b-lebar{grid-column:span 2}
.b-judul{font-size:1rem}
.b-note-jarak{margin-top:.75rem}
.b-note-tengah{text-align:center}
.sec-rapat{padding-bottom:clamp(2rem,5vw,3rem)}
/* ---------- lompatan bagian di kepala halaman ----------
Disembunyikan di bawah 1000px: di sana kepala halaman sudah dipakai
merek, pemilih Apps/Jasa, tema, keranjang, dan tombol Chat Admin.
Memaksakan empat tautan lagi membuat semuanya menyusut sampai susah
ditekan. Tautan yang sama tetap tersedia di kaki halaman. */
.lompat{display:none}
@media (min-width:1000px){
.lompat{display:flex;gap:1.35rem;align-items:center;margin-left:1.5rem}
.lompat a{
font-size:.875rem;font-weight:500;color:var(--muted);
text-decoration:none;padding:.35rem 0;position:relative;cursor:pointer;
transition:color .18s ease;
}
.lompat a:hover{color:var(--text)}
/* Garis bawah tumbuh dari elemennya sendiri, bukan border yang
menggeser tata letak saat muncul. */
.lompat a::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
background:var(--tinta,currentColor);border-radius:2px;
transform:scaleX(0);transform-origin:left;transition:transform .18s ease;
}
.lompat a:hover::after,
.lompat a[aria-current="true"]::after{transform:scaleX(1)}
.lompat a[aria-current="true"]{color:var(--text)}
@media (prefers-reduced-motion:reduce){
.lompat a,.lompat a::after{transition:none}
}
}
/* ---------- lambang toko ----------
Lambang aslinya sudah punya latar gelapnya sendiri, jadi kotak
gradien biru yang dulu jadi tempat ikon placeholder dicabut: dua latar
bertumpuk membuat tepinya terlihat kotor. Yang disisakan cuma sudut
membulat + bayangan, supaya bentuknya tetap seperti ikon aplikasi. */
.brand-mark{
background:#0A0A0B;
overflow:hidden;position:relative;
box-shadow:0 6px 16px -9px rgba(11,14,20,.75), inset 0 0 0 1px rgba(255,255,255,.06);
}
.brand-mark img{width:100%;height:100%;display:block;object-fit:cover}
a.brand:hover .brand-mark{
transform:scale(1.06) rotate(-2deg);
box-shadow:0 12px 24px -10px rgba(37,68,224,.75), inset 0 0 0 1px rgba(255,255,255,.12);
}
/* Kilau yang menyapu lambang: sekali waktu halaman dibuka, lalu tiap
kali disentuh. Pitanya dimiringkan supaya sapuannya terbaca sebagai
pantulan cahaya, bukan sekadar kotak terang yang lewat. */
.brand-mark::after{
content:"";position:absolute;inset:-40%;
background:linear-gradient(105deg,
transparent 38%,
rgba(255,255,255,.55) 47%,
rgba(255,255,255,.85) 50%,
rgba(255,255,255,.55) 53%,
transparent 62%);
transform:translateX(-130%);
pointer-events:none;
}
@keyframes kilau{ to{ transform:translateX(130%) } }
@keyframes lambang-masuk{
0% { opacity:0; transform:scale(.72) rotate(-14deg) }
60% { opacity:1; transform:scale(1.06) rotate(3deg) }
100%{ opacity:1; transform:scale(1) rotate(0) }
}
/* Cuma yang di kepala halaman yang beranimasi masuk — yang di kaki
halaman muncul jauh di bawah layar, animasinya tidak akan pernah
terlihat dan cuma jadi kerja sia-sia. */
.nav .brand-mark{ animation:lambang-masuk .72s cubic-bezier(.2,.9,.25,1.1) both }
.nav .brand-mark::after{ animation:kilau 1.15s cubic-bezier(.35,0,.2,1) .55s 1 both }
a.brand:hover .brand-mark::after{ animation:kilau .85s cubic-bezier(.35,0,.2,1) 1 }
/* Gerak dimatikan penuh untuk yang memintanya lewat setelan sistem —
lambangnya tetap tampil, cuma tidak bergerak. */
@media (prefers-reduced-motion:reduce){
.nav .brand-mark,
.nav .brand-mark::after,
a.brand:hover .brand-mark::after{ animation:none }
.brand-mark::after{ opacity:0 }
}
/* =========================================================================
LAPIS 2026-08 — ROMBAK TAMPILAN & TATA LETAK
Ditambahkan di bagian paling akhir supaya selalu menang urutan dari
lapis di atasnya. Aturan brand tetap dijaga: monokrom, satu aksen
kobalt, tombol memakai --tinta, produk berupa baris daftar, dan
setiap gerakan punya tugas.
========================================================================= */
/* ---------- 1. Hero apps: dua kolom editorial ----------
Kolom kiri berisi judul dan aksi; kolom kanan "etalase"
(hero-kaca) yang diisi dari katalog yang sama dengan halaman ini
(window.PRODUCTS), bukan gambar karangan. Di layar sempit panel
disembunyikan agar judul tetap bekerja. */
@media (min-width:920px){
#view-apps .hero{padding-top:clamp(4rem,9vw,7.5rem)}
#view-apps .hero-grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(330px,400px);
gap:clamp(2.5rem,6vw,4.5rem);
align-items:center;
}
#view-apps .hero-kaca{margin:0;width:100%}
}
@media (max-width:919px){
#view-apps .hero-kaca{display:none}
}
.hero-kaca{
position:relative;
background:color-mix(in oklab,var(--surface) 74%,transparent);
-webkit-backdrop-filter:blur(14px);
backdrop-filter:blur(14px);
border:1px solid var(--line);
border-radius:calc(var(--r-card) + 4px);
box-shadow:var(--shadow), inset 0 1px 0 color-mix(in oklab,#FFFFFF 60%,transparent);
padding:1.3rem;
overflow:hidden;
}
:root[data-theme="dark"] .hero-kaca{
box-shadow:var(--shadow), inset 0 1px 0 oklch(100% 0 0 / .06);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .hero-kaca{
box-shadow:var(--shadow), inset 0 1px 0 oklch(100% 0 0 / .06);
}
}
.hero-kaca-top{
display:flex;align-items:flex-end;justify-content:space-between;
gap:1rem;margin-bottom:1.15rem;
}
.hero-kaca-kicker{
align-self:center;
font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--muted);max-width:12ch;line-height:1.55;
}
.hero-kaca-hitung{
display:block;text-align:right;flex:none;
font-size:2.4rem;font-weight:800;letter-spacing:-.045em;line-height:.9;
font-variant-numeric:tabular-nums;color:var(--text);
}
.hero-kaca-hitung small{
display:block;margin-top:.32rem;
font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);
}
.hero-tiles{
display:grid;grid-template-columns:repeat(3,1fr);
gap:.65rem;
}
.hero-tile{
position:relative;aspect-ratio:1;
display:grid;place-items:center;
border-radius:var(--r-tile);background:#FFFFFF;
border:1px solid var(--line);overflow:hidden;
box-shadow:0 2px 10px -6px oklch(0% 0 0 / .45);
}
.hero-tile img{width:100%;height:100%;object-fit:cover}
.hero-tile svg{width:56%;height:56%;fill:var(--muted)}
.hero-kaca-note{
margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);
font-size:.8rem;line-height:1.55;color:var(--muted);
}
/* ---------- 2. Judul bagian: durasi & ritme yang lebih lega ---------- */
.sec-head{margin-bottom:clamp(3rem,6vw,4.5rem)}
.sec-head h2{position:relative}
.sec-head p{max-width:58ch}
/* ---------- 3. Kartu produk: lebih hidup saat disentuh ---------- */
.grid .app .nm{font-weight:650;letter-spacing:-.018em}
@media (hover:hover){
.grid .app:hover .nm{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.grid .app:hover .logo,
.grid .app:hover .logo-g{
transform:translateY(-6px);
box-shadow:0 14px 28px -18px oklch(0% 0 0 / .5);
transition:transform .45s var(--ease-pegas), box-shadow .45s var(--ease-halus);
}
}
.card-top h3{font-size:1.06rem;letter-spacing:-.02em}
.card-top .cat{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.card .pr,.var .pr{font-variant-numeric:tabular-nums}
/* ---------- 4. Baris jaminan: ikon di lingkarannya sendiri ---------- */
.assure .icon{
width:1rem;height:1rem;color:var(--accent);
background:var(--accent-soft);border-radius:50%;padding:.26rem;
}
.assure .icon svg{width:100%;height:100%}
/* ---------- 5. Pita ajakan: aksen kobalt yang lembut di pojok atas ---------- */
.band{
position:relative;overflow:hidden;
border:1px solid var(--line-strong);
}
.band::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(
520px 300px at 94% -12%,
oklch(74% .162 264 / .20),
transparent 68%
);
}
.band > *{position:relative}
.band h2{max-width:22ch}
@media (max-width:767px){
.band{padding-block:2.4rem}
}
/* ---------- 6. Kaki halaman: paragraf diberi napas ---------- */
.foot{row-gap:1.4rem}
.foot nav a{font-size:.9rem}
.copy{opacity:.85}
/* ---------- 7. Selambat masuk per bagian ---------- */
@media (prefers-reduced-motion:no-preference){
.sec .wrap > .rv{transition-delay:calc(var(--i, 0) * 40ms)}
}
/* ---------- 8. Portofolio Jasa ----------
Showcase portofolio website & aplikasi di bagian Jasa Digital. */
.portfolio-sec{
position:relative;
}
.portfolio-tabs{
display:flex;
gap:.5rem;
overflow-x:auto;
padding-bottom:.4rem;
margin-bottom:1.5rem;
scrollbar-width:none;
}
.portfolio-tabs::-webkit-scrollbar{display:none}
.portfolio-tab{
display:inline-flex;
align-items:center;
gap:.35rem;
padding:.55rem 1.15rem;
border-radius:999px;
border:1px solid var(--line-strong);
background:var(--surface);
color:var(--muted);
font-size:.88rem;
font-weight:600;
cursor:pointer;
white-space:nowrap;
transition:all .2s var(--ease);
;min-height:44px}
.portfolio-tab:hover{
color:var(--text);
border-color:var(--text);
}
.portfolio-tab[aria-pressed="true"],
.portfolio-tab.tab-active{
background:var(--accent);
border-color:var(--accent);
color:var(--accent-ink);
}
.portfolio-grid{
display:grid;
gap:16px;
grid-template-columns:1fr;
}
@media (min-width:600px){
.portfolio-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:960px){
.portfolio-grid{grid-template-columns:repeat(3,1fr)}
}
.portfolio-card{
display:flex;
flex-direction:column;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-card);
overflow:hidden;
transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
@media (hover:hover){
.portfolio-card:hover{
transform:translateY(-3px);
box-shadow:var(--shadow);
border-color:var(--line-strong);
}
}
@media (prefers-reduced-motion:reduce){
.portfolio-card:hover{transform:none}
}
.portfolio-thumb{
height:150px;
background:var(--surface-2);
position:relative;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
}
.portfolio-thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.portfolio-mono{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,var(--surface-2) 0%,color-mix(in srgb,var(--accent) 15%,var(--surface-2)) 100%);
position:relative;
}
.portfolio-mono span{
font-size:3.5rem;
font-weight:900;
color:var(--accent);
opacity:.3;
user-select:none;
}
.portfolio-mono .portfolio-mono-icon{
position:absolute;
font-size:2.2rem;
color:var(--accent);
opacity:.85;
}
.portfolio-info{
padding:1.25rem;
display:flex;
flex-direction:column;
flex:1;
gap:.45rem;
}
.portfolio-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:.5rem;
}
.portfolio-name{
font-size:1.05rem;
font-weight:700;
letter-spacing:-.02em;
color:var(--text);
margin:0;
}
.portfolio-tag{
display:inline-block;
font-size:.72rem;
font-weight:600;
color:var(--accent);
background:var(--accent-soft);
padding:.18rem .5rem;
border-radius:6px;
align-self:flex-start;
}
.portfolio-desc{
font-size:.86rem;
color:var(--muted);
line-height:1.45;
margin:0;
flex:1;
}
.portfolio-action{
margin-top:.6rem;
}
.portfolio-action .btn{
width:100%;
;min-height:44px}