/* body sengaja TIDAK diberi overflow-x:hidden supaya tidak jadi scroll
container sendiri (itu mematikan position:sticky nav). Lihat body di bawah. */
html{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;
--ease:cubic-bezier(.16,1,.3,1);
--ease-spring:cubic-bezier(.16,1,.3,1);
--ease-spring-snappy:cubic-bezier(.19,1,.22,1);
--ease-spring-bounce:cubic-bezier(.34,1.4,.64,1);
--ease-drawer:cubic-bezier(.32,.72,0,1);
--ease-soft:cubic-bezier(.25,1,.5,1);
--ease-press:cubic-bezier(.4,0,.2,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;
/* PENTING: overflow-x:hidden membuat body jadi scroll container
sendiri dan MEMBUNUH position:sticky (header nav ikut tergulung
ke atas). Pakai clip — tetap cegah scroll horizontal, tapi sticky
tetap jalan. */
overflow-x:clip;
}
.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 .5s var(--ease), background .5s var(--ease), border-color .5s 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 .5s var(--ease), box-shadow .5s var(--ease);
}
.brand-mark svg{width:24px;height:24px;display:block;filter:drop-shadow(0 1px 2px rgba(11,14,20,.35))}
@media (hover:hover){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 .5s var(--ease),color .5s 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 .5s 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 .5s 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, .hero .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, .hero .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:.55rem;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 16px 6px 2px;scrollbar-width:none;scroll-padding:8px}
.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 .5s 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}
/* Catatan transparansi katalog. Sengaja dibuat menonjol dan berbatas jelas:
ini ganti dari klaim "resmi" ke keterangan yang apa adanya. Jangan
diperkecil atau dipindah ke footer — justru ini yang membangun trust. */
.catatan-hukum{
display:flex;gap:.7rem;align-items:flex-start;
margin:0 0 1.5rem;padding:.9rem 1rem;
background:var(--accent-soft);
border:1px solid var(--line);
border-left:3px solid var(--accent);
border-radius:var(--r-tile);
color:var(--text);font-size:.84rem;line-height:1.6;
}
.catatan-hukum .icon{flex:none;width:18px;height:18px;margin-top:.15rem;color:var(--accent)}
.catatan-hukum b{font-weight:700}
@media (max-width:520px){.catatan-hukum{font-size:.8rem;padding:.8rem .85rem}}
/* ---------- 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 .35s var(--ease), box-shadow .35s var(--ease);
}
@media (hover:hover){.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 .45s var(--ease),background .45s 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 .5s var(--ease),color .5s 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 .5s var(--ease),box-shadow .5s 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 .5s 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 .35s var(--ease), box-shadow .35s 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 .35s var(--ease), box-shadow .35s var(--ease)}
@media (hover:hover){.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 .35s 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,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .35s var(--ease-halus),visibility .35s;z-index:998}
.scrim.on{opacity:1;visibility:visible}
.drawer{
position:fixed;top:0;right:0;height:100%;width:min(560px,100%);z-index:1000 !important;
background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;
transform:translateX(100%);
-webkit-transform:translateX(100%);
pointer-events:none;
visibility:hidden;
transition:transform .32s cubic-bezier(.16,1,.3,1), visibility 0s .32s, box-shadow .32s ease;
}
.drawer.on{
z-index:1000 !important;
transform:translateX(0);
-webkit-transform:translateX(0);
pointer-events:auto;
visibility:visible;
box-shadow:-24px 0 60px -30px rgba(8,10,14,.7);
transition:transform .32s cubic-bezier(.16,1,.3,1), visibility 0s 0s, box-shadow .32s ease;
}
@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 .5s 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;
flex-direction: column;
gap: .42rem;
padding: .85rem 0;
border-bottom: 1px solid var(--line);
}
.line:last-child{border-bottom:0}
.line-head{
display: flex;
align-items: center;
gap: .75rem;
width: 100%;
}
.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:650;line-height:1.25}
.line-info span{font-size:.8rem;color:var(--muted);display:block;margin-top:2px}
.cart-item-desc{
font-size:.73rem;
color:var(--text-muted, #94a3b8);
line-height:1.42;
margin:0;
}
[data-theme="light"] .cart-item-desc{
color:#64748b;
}
.cart-item-garansi{
margin-top:4px;
display:flex;
align-items:center;
gap:4px;
flex-wrap:wrap;
}
.cart-garansi-label{
font-size:.73rem;
color:var(--muted, #94a3b8);
font-weight:600;
margin-right:2px;
flex-shrink:0;
}
[data-theme="light"] .cart-garansi-label{
color:#64748b;
}
.cart-item-garansi .tag-garansi{
margin-left:0 !important;
font-size:.71rem;
font-weight:600;
padding:.22rem .58rem;
border-radius:8px;
line-height:1.35;
display:inline-flex;
align-items:center;
gap:.35rem;
max-width:100%;
}
.cart-item-garansi .tag-garansi svg{
width:12px;
height:12px;
flex-shrink:0;
}
.qty{display:flex;align-items:center;gap:.15rem;border:1px solid var(--line-strong);border-radius:999px;padding:.15rem;flex:none;margin-top:2px}
.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 calc(.7rem + env(safe-area-inset-bottom, 0px));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:44px;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 .45s var(--ease), transform .45s 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 .5s var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.drawer.on .line{animation:lineIn .5s 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 .45s var(--ease) both;
}
.toast.ok{color:#16A34A}
.toast.err{color:#DC2626}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}
/* @keyframes toastIn dihapus → dipakai ulang lewat transisi.css (state
masuk/keluar yang seimbang, bukan sekali-pakai). */
/* =========================================================================
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, .hero .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. */
/* 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{
--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}
@media (hover:hover){.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 .4s var(--ease-halus),border-color .4s var(--ease-halus),box-shadow .4s 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 .4s var(--ease-halus);
}
@media (hover:hover){.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 .45s var(--ease-halus),background .34s 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, .grid .app{animation:masuk .42s var(--ease-halus) both;animation-delay:calc(var(--i,0) * 32ms);will-change:transform,opacity}
@keyframes masuk{from{opacity:0;transform:translateY(14px) scale(.96)}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 .45s var(--ease-halus),color .45s var(--ease-halus),transform .45s 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 .4s 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);
}
}
}
: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. Dilengkapi transisi pergantian tema yang mulus. */
html{
background:var(--bg);
transition:background-color .32s cubic-bezier(.16,1,.3,1), color .32s cubic-bezier(.16,1,.3,1);
}
body, .nav-in, .hero-kaca, .mosaic, .app, .sheet, .search input, .chip, .catatan-hukum, .drawer, .btn-ghost{
transition:background-color .32s cubic-bezier(.16,1,.3,1), border-color .32s cubic-bezier(.16,1,.3,1), color .32s cubic-bezier(.16,1,.3,1), box-shadow .32s cubic-bezier(.16,1,.3,1);
}
/* 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, .hero .hero-h1{
font-size:clamp(2.1rem,3.8vw,2.85rem);
line-height:1.08;
letter-spacing:-.04em;
font-weight:800;
max-width:18ch;
margin-bottom:0.85rem;
}
.hero h1 em, .hero .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(0.95rem,1.2vw,1.05rem);
line-height:1.5;max-width:48ch;color:var(--muted);
margin-bottom:1.35rem;
}
.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:1160px;padding-inline:20px}
.sec{padding:clamp(3.5rem,8vw,6.5rem) 0}
.sec-head{margin-bottom:clamp(2rem,4vw,3rem);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(1.75rem,4vw,2.75rem) 0 clamp(1.25rem,3vw,2rem)}
.hero-grid{display:block}
.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(0.65rem,1.4vw,0.85rem) 0;overflow:hidden;
background:var(--surface);
}
.pita-jalur img{width:40px;height:40px;margin-inline:1.25rem}
.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 42s linear infinite;
will-change:transform;
transform:translate3d(0,0,0);
}
.pita.jalan:hover .pita-jalur{animation-play-state:paused}
@keyframes pitaGeser{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
}
/* 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 .4s 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 .4s var(--ease-halus),border-color .4s var(--ease-halus),transform .4s 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 .4s var(--ease-halus),
border-color .4s var(--ease-halus),
box-shadow .45s var(--ease-halus),
opacity .4s 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);
transition:background-color .22s var(--ease-halus),transform .18s var(--ease-pegas),box-shadow .22s var(--ease-halus);
}
.btn-primary:hover{
background:color-mix(in oklab,var(--tinta) 88%,var(--muted));
transform:translateY(-2px);
box-shadow:0 8px 20px -8px oklch(16% .012 265 / .35);
}
.btn-primary:active{transform:scale(.96);transition:transform .12s cubic-bezier(.23,1,.32,1)}
.btn-primary:disabled:hover{background:var(--tinta);transform:none}
/* 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);transition:transform .22s var(--ease-pegas)}
@media (hover:hover){.btn-primary:hover .icon{background:color-mix(in oklab,var(--tinta-atas) 28%,transparent);transform:translateX(3px)}}
.btn-ghost{
border-color:var(--line-strong);
background:color-mix(in oklab,var(--surface) 55%,transparent);
transition:border-color .22s var(--ease-halus),background .22s var(--ease-halus),transform .18s var(--ease-pegas),box-shadow .22s var(--ease-halus);
}
@media (hover:hover){.btn-ghost:hover{border-color:var(--text);background:var(--surface);transform:translateY(-1px);box-shadow:0 4px 12px -4px oklch(16% .012 265 / .1)}}
.btn-ghost:active{transform:scale(.96);transition:transform .12s cubic-bezier(.23,1,.32,1)}
: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 .4s var(--ease-halus),color .4s var(--ease-halus),background .4s 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 .34s var(--ease-halus),box-shadow .34s 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 .22s var(--ease-halus),color .22s var(--ease-halus),
border-color .22s var(--ease-halus),transform .18s var(--ease-pegas),box-shadow .22s var(--ease-halus);
}
@media (hover:hover){.chip:hover{background:var(--surface);border-color:var(--line-strong);color:var(--text);transform:translateY(-1px)}}
.chip:active{transform:scale(.95);transition:transform .12s cubic-bezier(.23,1,.32,1)}
.chip[aria-pressed="true"]{
background:var(--tinta);border-color:var(--tinta);color:var(--tinta-atas);
box-shadow:0 2px 8px -2px oklch(16% .012 265 / .25);
}
.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 .4s 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 .34s 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 .34s var(--ease-halus),color .34s 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 .45s 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 .34s 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 .55s 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, .hero .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 .24s var(--ease-pegas),box-shadow .28s var(--ease-halus);
will-change:transform;
}
@media (hover:hover){
.app:hover{
background:var(--surface);
border-color:var(--line);
transform:translateY(-3px);
box-shadow:0 8px 20px -10px oklch(16% .012 265 / .12), inset 0 1px 0 #FFFFFF;
}
:root[data-theme="dark"] .app:hover{
border-color:var(--line-strong);
box-shadow:0 12px 28px -14px oklch(0% 0 0 / .6), inset 0 1px 0 oklch(100% 0 0 / .08);
}
}
.app:active{
transform:scale(.95);
transition:transform .12s cubic-bezier(.23,1,.32,1);
}
.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);
transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s var(--ease-halus);
}
@media (hover:hover){
.app:hover .logo,.app:hover .logo-g{
transform:translateY(-2px) scale(1.05);
box-shadow:0 4px 12px -4px rgba(20,22,26,.15), 0 14px 28px -12px rgba(20,22,26,.4);
}
}
/* 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 di kartu produk: jika ada promo, angka coret di atas dan harga sekarang di bawahnya */
.app .hg{
display:flex;flex-direction:column;align-items:center;justify-content:center;
font-size:.7rem;color:var(--muted);letter-spacing:-.025em;
margin-top:-.25rem;line-height:1.2;
}
.app .hg .coret{
display:block;font-size:.82em;opacity:.65;text-decoration:line-through;color:var(--muted);
margin-bottom:1px;line-height:1.15;white-space:nowrap;
}
.app .hg .now{display:block;color:var(--text);font-weight:600;line-height:1.2;white-space:nowrap}
.var .pr .coret{font-size:.82em;opacity:.6;text-decoration:line-through;color:var(--muted);margin-right:6px;font-weight:normal}
.var .pr .now{color:var(--text)}
.app .stk{
font-size:.62rem;line-height:1.15;font-weight:700;letter-spacing:-.015em;
padding:2px 6px;border-radius:999px;margin-top:-.2rem;white-space:nowrap;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(16,185,129,.14);color:#10b981;border:1px solid rgba(16,185,129,.25);
box-shadow:0 1px 2px rgba(16,185,129,.06);
}
.app .stk.habis{
background:rgba(239,68,68,.14);color:#ef4444;border-color:rgba(239,68,68,.25);box-shadow:none;
}
@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}
.app .stk{font-size:.68rem;padding:2px 8px;margin-top:-.15rem}
}
/* 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 .36s 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 .2s var(--ease-halus),border-color .2s var(--ease-halus),transform .14s var(--ease-pegas);
}
.sheet-x:hover{color:var(--text);border-color:var(--line-strong)}
.sheet-x:active{transform:scale(.92)}
.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 .55s var(--ease-halus),opacity .38s 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 & badge jaminan mutu */
.hero-kontak{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:1.4rem}
.hero-kontak-item{
display:inline-flex;align-items:center;gap:.4rem;
font-size:.875rem;font-weight:600;color:var(--muted);
}
.hero-kontak-item .icon{font-size:1.05rem;color:var(--accent)}
.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 .34s var(--ease-halus),border-color .34s 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 WA disembunyikan agar tidak redundant dengan launcher resmi #bulat */
.fab-wa{display:none !important}
/* 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 .3s 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 .3s 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(1.75rem,3.5vw,2.75rem);padding-bottom:1.5rem}
#view-apps .hero-grid{
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(300px,360px);
gap:clamp(1.75rem,3.5vw,3rem);
align-items:center;
}
#view-apps .hero-kaca{margin:0;width:100%;padding:1.1rem}
.hero-kaca-hitung{font-size:1.85rem}
.hero-tiles{max-height:230px}
}
@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:var(--surface);
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 .35s 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 .4s var(--ease),box-shadow .4s var(--ease),border-color .4s 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}
/* ---------- menu bulat kanal resmi (pojok kiri) ----------
Pintu akses semua kanal resmi. Disesuaikan presisi & ergonomis
pada 3 tier: Mobile (360-767px), Tablet (768-1023px), Desktop (1024px+). */
.bulat{
position:fixed;left:16px;
bottom:calc(16px + env(safe-area-inset-bottom,0px));
z-index:72;
width:56px;height:56px;padding:0;
display:inline-flex;align-items:center;justify-content:center;
border:1px solid color-mix(in oklab,var(--tinta-atas) 14%,transparent);
border-radius:50%;cursor:pointer;
background:var(--tinta);color:var(--tinta-atas);
box-shadow:0 12px 32px -10px rgba(20,22,26,.65);
transition:transform .3s var(--ease-pegas,.3s),box-shadow .25s ease,background .25s ease;
-webkit-tap-highlight-color:transparent;
}
.bulat .icon{font-size:1.45rem;line-height:1}
@media (hover:hover){.bulat:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(20,22,26,.7)}}
.bulat:active{transform:scale(.94)}
.bulat[aria-expanded="true"]{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.bulat:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.bulat-pop{
position:fixed;left:16px;z-index:71;
bottom:calc(82px + env(safe-area-inset-bottom,0px));
width:min(296px,calc(100vw - 32px));
display:flex;flex-direction:column;gap:3px;
padding:.65rem;border-radius:20px;
background:var(--surface);
border:1px solid var(--line);
box-shadow:0 24px 54px -16px rgba(20,22,26,.6);
}
.bulat-pop-judul{
margin:0;padding:.35rem .55rem .5rem;
font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted);
}
.bulat-item{
display:flex;align-items:center;gap:.75rem;
padding:.65rem .6rem;border-radius:14px;text-decoration:none;color:inherit;
transition:background .3s ease,transform .26s var(--ease-pegas,.3s);
}
.bulat-item:hover{background:var(--surface-2)}
.bulat-item:active{transform:scale(.985)}
.bulat-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.bulat-item-ic{
flex:0 0 auto;width:38px;height:38px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;color:#fff;
}
.bulat-item-ic .icon{font-size:1.2rem;line-height:1}
.bulat-item-ic.tiktok{background:#16181c}
.bulat-item-ic.tiktok .icon{width:1.05rem;height:1.05rem;fill:currentColor}
.bulat-item-ic.wa{background:#1FA855}
.bulat-item-ic.tg{background:#229ED9}
.bulat-item-ic.ch{background:#1FA855}
.bulat-item-teks{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.bulat-item-teks b{font-size:.96rem;font-weight:700;letter-spacing:-.01em;color:var(--text);line-height:1.25}
.bulat-item-teks small{font-size:.80rem;color:var(--muted);line-height:1.3}
.bulat-item:hover .bulat-item-teks b{color:var(--accent)}
@keyframes bulatMuncul{
from{opacity:0;transform:translateY(14px) scale(.94)}
to{opacity:1;transform:none}
}
.bulat-pop:not([hidden]){animation:bulatMuncul .24s var(--ease-pegas,.3s) both}
/* Tablet (768px – 1023px): ruang sentuh lebih luas & proporsional */
@media (min-width:768px) and (max-width:1023px){
.bulat{
width:62px;height:62px;
left:20px;
bottom:calc(20px + env(safe-area-inset-bottom,0px));
}
.bulat .icon{font-size:1.6rem}
.bulat-pop{
left:20px;
bottom:calc(92px + env(safe-area-inset-bottom,0px));
width:314px;
padding:.7rem;
border-radius:22px;
}
.bulat-item{padding:.7rem .65rem;gap:.8rem}
.bulat-item-ic{width:40px;height:40px}
.bulat-item-ic .icon{font-size:1.22rem}
.bulat-item-teks b{font-size:1rem}
.bulat-item-teks small{font-size:.82rem}
}
/* Desktop & Ultrawide (1024px+): floating island megah & nyaman untuk klik kursor mouse */
@media (min-width:1024px){
.bulat{
width:68px;height:68px;
left:24px;
bottom:calc(24px + env(safe-area-inset-bottom,0px));
}
.bulat .icon{font-size:1.8rem}
.bulat-pop{
left:24px;
bottom:calc(100px + env(safe-area-inset-bottom,0px));
width:336px;
padding:.8rem .75rem;
border-radius:24px;
box-shadow:0 28px 60px -18px rgba(20,22,26,.65);
}
.bulat-item{padding:.75rem .7rem;gap:.85rem;border-radius:15px}
.bulat-item-ic{width:42px;height:42px}
.bulat-item-ic .icon{font-size:1.25rem}
.bulat-item-teks b{font-size:1.02rem}
.bulat-item-teks small{font-size:.84rem}
}
@media (prefers-reduced-motion:reduce){
.bulat{transition:none}
.bulat-pop:not([hidden]){animation:none}
}
/* ---------- 25. Tag Stok Real-time Supplier H2H ---------- */
.tag-stok{
display:inline-flex;
align-items:center;
gap:.2rem;
font-size:.68rem;
font-weight:700;
padding:.12rem .4rem;
border-radius:999px;
margin-left:.35rem;
vertical-align:middle;
line-height:1.2;
}
.tag-stok.ready{
background:rgba(16,185,129,.14);
color:#10b981;
border:1px solid rgba(16,185,129,.25);
}
.tag-stok.habis{
background:rgba(239,68,68,.14);
color:#ef4444;
border:1px solid rgba(239,68,68,.25);
}
.tag-stok.nogaransi{
background:rgba(148,163,184,.14);
color:#94a3b8;
border:1px solid rgba(148,163,184,.28);
}
.tag-kartu{
display:inline-flex;
align-items:center;
font-size:.62rem;
font-weight:800;
letter-spacing:.02em;
padding:.1rem .38rem;
border-radius:999px;
vertical-align:middle;
white-space:nowrap;
}
.tag-kartu.nogaransi{
background:rgba(148,163,184,.14);
color:#94a3b8;
border:1px solid rgba(148,163,184,.28);
}
.var.habis{
opacity:.82;
}
.var.habis .addv.disabled{
pointer-events:none;
cursor:not-allowed;
opacity:.4;
}
.var.habis .btn-wishlist-v{
pointer-events:auto !important;
cursor:pointer !important;
}
/* ---------- 25b. Tag Garansi Varian & Kartu Produk ---------- */
.tag-garansi{
display:inline-flex;
align-items:center;
gap:.22rem;
font-size:.68rem;
font-weight:700;
padding:.12rem .45rem;
border-radius:999px;
margin-left:.35rem;
vertical-align:middle;
line-height:1.25;
}
.tag-garansi.aktif{
background:rgba(16,185,129,.14);
color:#10b981;
border:1px solid rgba(16,185,129,.28);
}
.tag-garansi.antilimit{
background:rgba(99,102,241,.14);
color:#818cf8;
border:1px solid rgba(99,102,241,.32);
}
.tag-garansi.nogaransi{
background:rgba(148,163,184,.14);
color:#94a3b8;
border:1px solid rgba(148,163,184,.28);
}
[data-theme="light"] .tag-garansi.aktif{
background:rgba(16,185,129,.1);
color:#047857;
border:1px solid rgba(16,185,129,.28);
}
[data-theme="light"] .tag-garansi.antilimit{
background:rgba(99,102,241,.1);
color:#4338ca;
border:1px solid rgba(99,102,241,.28);
}
[data-theme="light"] .tag-garansi.nogaransi{
background:#f1f5f9;
color:#475569;
border:1px solid #cbd5e1;
}
.tag-kartu-garansi{
display:inline-flex;
align-items:center;
gap:.2rem;
font-size:.62rem;
font-weight:700;
padding:.08rem .38rem;
border-radius:999px;
background:rgba(16,185,129,.12);
color:#10b981;
border:1px solid rgba(16,185,129,.24);
margin-top:2px;
line-height:1.2;
}
.tag-kartu-garansi.antilimit{
background:rgba(99,102,241,.12);
color:#818cf8;
border:1px solid rgba(99,102,241,.28);
}
.tag-kartu-garansi.nogaransi{
background:rgba(148,163,184,.12);
color:#94a3b8;
border:1px solid rgba(148,163,184,.24);
}
.tag-kartu-garansi svg,
.tag-garansi svg,
.tag-garansi-mini svg{
width:11px;
height:11px;
flex-shrink:0;
vertical-align:middle;
}
/* Deskripsi & Jaminan Garansi di Lembar Produk */
.sheet-deskripsi-box{
background:var(--surface-2,rgba(255,255,255,0.03));
border:1px solid var(--line,rgba(255,255,255,0.08));
border-radius:14px;
padding:.75rem .9rem;
margin-bottom:.9rem;
}
.sheet-deskripsi-teks{
font-size:.84rem;
color:var(--text,#e2e8f0);
line-height:1.45;
margin:0;
}
.sheet-garansi-banner{
display:none !important;
}
.sheet-garansi-banner.banner-nogaransi{
background:rgba(148,163,184,.08);
border-color:rgba(148,163,184,.22);
}
.sheet-garansi-banner.banner-nogaransi .sheet-garansi-banner-head{
color:#94a3b8;
}
.sheet-garansi-banner.banner-nogaransi .sheet-garansi-sub{
color:var(--muted,#94a3b8);
}
.sheet-garansi-banner.banner-mixed{
background:rgba(245,158,11,.08);
border-color:rgba(245,158,11,.26);
}
.sheet-garansi-banner.banner-mixed .sheet-garansi-banner-head{
color:#f59e0b;
}
.sheet-garansi-banner.banner-mixed .sheet-garansi-sub{
color:#fde68a;
}
.sheet-garansi-banner-head{
display:flex;
align-items:center;
gap:.35rem;
color:#10b981;
font-size:.8rem;
font-weight:700;
margin-bottom:.15rem;
}
.sheet-garansi-banner-head .sheet-garansi-icon{
width:14px;
height:14px;
flex:none;
}
.sheet-garansi-sub{
font-size:.74rem;
color:var(--muted,#94a3b8);
line-height:1.35;
margin:0;
}
/* ---------- 26. Modal Pop-Up Pilihan Transaksi & QRIS ---------- */
.modal-transaksi {
position: fixed !important;
inset: 0 !important;
z-index: 100000 !important;
display: flex !important;
align-items: flex-end;
justify-content: center;
padding: 0;
pointer-events: none;
visibility: hidden;
opacity: 0;
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
transition: opacity .38s var(--ease-spring), visibility .35s;
}
.modal-transaksi.on {
pointer-events: auto !important;
visibility: visible !important;
opacity: 1 !important;
}
.modal-transaksi[hidden] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.modal-transaksi-card {
position: relative;
z-index: 100001 !important;
width: 100%;
max-width: 480px;
background: var(--surface, #11141c) !important;
color: var(--text, #f1f5f9) !important;
border-radius: 24px 24px 0 0;
border-top: 1px solid var(--line-strong, rgba(255,255,255,0.18));
box-shadow: 0 -25px 60px -20px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.12);
padding: 1.4rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
transform: translateY(100%);
opacity: 0;
filter: blur(6px);
transition: transform .42s var(--ease-drawer), opacity .35s var(--ease-spring), filter .35s var(--ease-spring);
max-height: 90dvh;
overflow-y: auto;
overscroll-behavior: contain;
}
.modal-transaksi.on .modal-transaksi-card {
transform: translateY(0) !important;
opacity: 1 !important;
filter: blur(0px) !important;
}
@media (min-width: 640px) {
.modal-transaksi {
align-items: center !important;
padding: 1.5rem !important;
}
.modal-transaksi-card {
border-radius: 24px !important;
border: 1px solid var(--line-strong, rgba(255,255,255,0.18)) !important;
box-shadow: 0 25px 65px -15px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
transform: scale(.93) translateY(18px);
opacity: 0;
filter: blur(8px);
transition: transform .38s var(--ease-spring), opacity .32s var(--ease-spring), filter .32s var(--ease-spring);
padding: 1.6rem 1.5rem !important;
}
.modal-transaksi.on .modal-transaksi-card {
transform: scale(1) translateY(0) !important;
opacity: 1 !important;
filter: blur(0px) !important;
}
}
.modal-transaksi-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.1rem;
}
.modal-transaksi-badge {
display: inline-flex;
align-items: center;
gap: .35rem;
font-size: .75rem;
font-weight: 700;
color: var(--accent);
background: var(--accent-soft);
padding: 3px 9px;
border-radius: 999px;
margin-bottom: .45rem;
}
.modal-transaksi-badge .icon {
width: 14px;
height: 14px;
}
.modal-transaksi-head h3 {
font-size: 1.2rem;
font-weight: 750;
letter-spacing: -.03em;
line-height: 1.25;
margin-bottom: .25rem;
}
.modal-transaksi-sub {
font-size: .84rem;
color: var(--muted);
line-height: 1.45;
}
.modal-transaksi-tutup {
flex: none;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--muted);
display: grid;
place-items: center;
cursor: pointer;
transition: all .35s var(--ease);
touch-action: manipulation;
}
.modal-transaksi-tutup:hover {
color: var(--text);
border-color: var(--line-strong);
}
.modal-transaksi-summary {
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 14px;
padding: .75rem 1rem;
margin-bottom: 1.15rem;
font-size: .83rem;
display: flex;
flex-direction: column;
gap: .4rem;
}
.modal-transaksi-summary .summary-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
color: var(--muted);
}
.modal-transaksi-summary .summary-row strong {
color: var(--text);
font-weight: 600;
min-width: 0;
word-break: break-all;
overflow-wrap: anywhere;
text-align: right;
}
.modal-transaksi-summary .summary-row.total-row {
border-top: 1px dashed var(--line);
padding-top: .4rem;
margin-top: .2rem;
font-size: .9rem;
}
.modal-transaksi-summary .total-highlight {
color: var(--accent);
font-weight: 750;
font-size: 1.02rem;
}
.modal-transaksi-summary .kode-highlight {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
letter-spacing: .02em;
}
.modal-transaksi-options {
display: flex;
flex-direction: column;
gap: .75rem;
margin-bottom: 1rem;
}
.transaksi-opt-card {
display: flex;
align-items: center;
gap: .95rem;
padding: .95rem 1.05rem;
border-radius: 16px;
border: 1.5px solid var(--line);
background: var(--surface);
text-decoration: none;
color: var(--text);
cursor: pointer;
transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
min-height: 64px;
}
.transaksi-opt-card:active {
transform: scale(.98);
}
.transaksi-opt-card.opt-wa {
border-color: rgba(37, 211, 102, 0.4);
background: color-mix(in srgb, #25D366 4%, var(--surface));
}
.transaksi-opt-card.opt-wa:hover {
border-color: #25D366;
box-shadow: 0 8px 24px -10px rgba(37, 211, 102, 0.5);
background: color-mix(in srgb, #25D366 9%, var(--surface));
}
.transaksi-opt-card.opt-tg {
border-color: rgba(0, 136, 204, 0.4);
background: color-mix(in srgb, #0088cc 4%, var(--surface));
}
.transaksi-opt-card.opt-tg:hover {
border-color: #0088cc;
box-shadow: 0 8px 24px -10px rgba(0, 136, 204, 0.5);
background: color-mix(in srgb, #0088cc 9%, var(--surface));
}
.opt-icon-wrap {
flex: none;
width: 44px;
height: 44px;
border-radius: 13px;
display: grid;
place-items: center;
}
.opt-wa .opt-icon-wrap {
background: #25D366;
color: #FFFFFF;
box-shadow: 0 6px 16px -6px rgba(37, 211, 102, 0.7);
}
.opt-tg .opt-icon-wrap {
background: #0088cc;
color: #FFFFFF;
box-shadow: 0 6px 16px -6px rgba(0, 136, 204, 0.7);
}
.opt-icon-wrap .icon-plat {
width: 24px;
height: 24px;
}
.opt-content {
flex: 1;
min-width: 0;
}
.opt-title-line {
display: flex;
align-items: center;
gap: .5rem;
margin-bottom: .2rem;
}
.opt-name {
font-size: .95rem;
font-weight: 700;
letter-spacing: -.02em;
}
.opt-badge {
font-size: .68rem;
font-weight: 700;
padding: 1px 7px;
border-radius: 999px;
letter-spacing: .02em;
text-transform: uppercase;
}
.opt-badge.wa {
background: rgba(37, 211, 102, 0.15);
color: #1ea952;
}
.opt-badge.tg {
background: rgba(0, 136, 204, 0.15);
color: #0088cc;
}
.opt-desc {
font-size: .78rem;
color: var(--muted);
line-height: 1.35;
margin: 0;
}
.opt-arrow {
flex: none;
font-size: 1.15rem;
font-weight: 700;
color: var(--muted);
transition: transform .35s var(--ease), color .35s var(--ease);
}
.transaksi-opt-card:hover .opt-arrow {
color: var(--text);
transform: translateX(3px);
}
.modal-transaksi-foot {
text-align: center;
padding-top: .3rem;
}
.foot-note-text {
display: inline-flex;
align-items: center;
gap: .35rem;
font-size: .75rem;
color: var(--muted);
line-height: 1.3;
}
.foot-note-text .icon-mini {
width: 13px;
height: 13px;
flex: none;
}
/* ================================================================
MODAL QRIS DINAMIS (ALL PAYMENT) KHUSUS EMAIL
================================================================ */
.modal-qris-wrap .modal-transaksi-card {
max-width: 460px;
}
.qris-badge-highlight {
background: rgba(16, 185, 129, 0.12) !important;
color: #10b981 !important;
border-color: rgba(16, 185, 129, 0.25) !important;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.qris-pulse-dot {
width: 7px;
height: 7px;
background: #10b981;
border-radius: 50%;
box-shadow: 0 0 8px #10b981;
animation: pulse-dot 1.5s infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.3); }
}
.qris-strip-banks {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.4rem 0.6rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 8px;
font-size: 0.68rem;
font-weight: 700;
color: var(--muted);
letter-spacing: 0.5px;
}
.qris-strip-banks span {
padding: 2px 6px;
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
}
.qris-view-state {
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.qris-view-state[hidden] {
display: none !important;
}
.qris-view-center {
text-align: center;
align-items: center;
padding: 1.5rem 0.5rem;
}
.qris-loader-spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(255, 255, 255, 0.1);
border-top-color: #38bdf8;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin: 2rem auto 0.5rem;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.qris-loader-text {
text-align: center;
font-size: 0.85rem;
color: var(--muted);
margin-bottom: 2rem;
}
.qris-summary-box {
margin-bottom: 0 !important;
}
.qris-email-val {
color: #38bdf8 !important;
word-break: break-all;
}
.qris-total-group {
display: flex;
align-items: center;
gap: 0.5rem;
}
.btn-copy-mini {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--text);
font-size: 0.72rem;
font-weight: 600;
padding: 4px 9px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-copy-mini .btn-copy-icon {
width: 13px;
height: 13px;
transition: transform 0.2s;
}
.btn-copy-mini:hover {
background: rgba(56, 189, 248, 0.15);
border-color: #38bdf8;
color: #38bdf8;
transform: translateY(-1px);
}
.btn-copy-mini.copied {
background: rgba(16, 185, 129, 0.16) !important;
border-color: #10b981 !important;
color: #10b981 !important;
transform: scale(1.05);
}
.qris-warning-box {
display: flex;
align-items: flex-start;
gap: 0.65rem;
padding: 0.75rem 0.85rem;
background: rgba(234, 179, 8, 0.08);
border: 1px solid rgba(234, 179, 8, 0.25);
border-radius: 10px;
font-size: 0.78rem;
color: #fef08a;
line-height: 1.4;
}
.warn-icon {
flex: none;
width: 18px;
height: 18px;
color: #f59e0b;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
animation: warn-glow 2.5s infinite ease-in-out;
}
.warn-icon .icon {
width: 18px;
height: 18px;
}
@keyframes warn-glow {
0%, 100% { opacity: 0.85; transform: scale(1); }
50% { opacity: 1; transform: scale(1.08); filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6)); }
}
.qris-warning-box strong {
display: block;
font-size: 0.8rem;
margin-bottom: 2px;
color: #fef08a;
}
.qris-warning-box p {
margin: 0;
opacity: 0.85;
}
.qris-qr-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
width: 100%;
}
.qris-qr-card {
background: #ffffff;
padding: 12px;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 310px;
box-sizing: border-box;
}
.qris-qr-image {
width: 100%;
max-width: 286px;
height: auto;
aspect-ratio: 1763 / 2480;
object-fit: contain;
display: block;
border-radius: 6px;
cursor: pointer;
transition: transform 0.3s ease;
}
.qris-qr-image:hover {
transform: scale(1.01);
}
.qris-qr-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
width: 100%;
max-width: 310px;
}
.btn-qris-download {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
font-size: 0.82rem;
font-weight: 700;
color: #ffffff;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.22) 0%, rgba(5, 150, 105, 0.28) 100%);
border: 1px solid rgba(16, 185, 129, 0.45);
padding: 10px 14px;
min-height: 44px;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none;
touch-action: manipulation;
}
.btn-qris-download:hover {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.35) 0%, rgba(5, 150, 105, 0.45) 100%);
border-color: #10b981;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}
.btn-qris-download:active {
transform: translateY(0);
}
.btn-qris-download .icon {
width: 15px;
height: 15px;
color: #34d399;
}
.btn-qris-expand {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
font-size: 0.82rem;
font-weight: 600;
color: var(--text-sub, #cbd5e1);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 10px 14px;
min-height: 44px;
border-radius: 10px;
text-decoration: none;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
touch-action: manipulation;
}
.btn-qris-expand:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
}
.btn-qris-expand .icon {
width: 14px;
height: 14px;
}
.qris-live-status-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6rem 0.8rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
font-size: 0.8rem;
}
.qris-radar-box {
display: flex;
align-items: center;
gap: 0.45rem;
color: #38bdf8;
font-weight: 600;
font-size: 0.78rem;
}
.radar-dot {
width: 8px;
height: 8px;
background: #38bdf8;
border-radius: 50%;
animation: radar-pulse 1.8s infinite;
}
@keyframes radar-pulse {
0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7); }
70% { box-shadow: 0 0 0 8px rgba(56, 189, 248, 0); }
100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
}
.qris-countdown-box {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-weight: 700;
color: var(--muted);
font-size: 0.78rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.qris-countdown-box .timer-icon {
width: 14px;
height: 14px;
color: var(--muted);
}
.qris-anim-wrap {
width: 64px;
height: 64px;
margin: 0 auto 1rem;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.qris-svg-processing {
display: block;
width: 64px;
height: 64px;
}
.qris-circ-progress {
stroke-dasharray: 176;
stroke-dashoffset: 176;
transform-origin: center;
transform: rotate(-90deg);
animation: qris-circle-fill 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.qris-check-path {
stroke-dasharray: 40;
stroke-dashoffset: 40;
animation: qris-check-draw 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.7s forwards;
}
@keyframes qris-circle-fill {
to { stroke-dashoffset: 0; }
}
@keyframes qris-check-draw {
to { stroke-dashoffset: 0; }
}
.qris-success-badge-wrap {
position: relative;
width: 80px;
height: 80px;
margin: 0 auto 1.2rem;
display: flex;
align-items: center;
justify-content: center;
}
.qris-success-glow-halo {
position: absolute;
inset: -14px;
background: radial-gradient(circle, rgba(16, 185, 129, 0.35) 0%, rgba(56, 189, 248, 0.15) 50%, transparent 70%);
border-radius: 50%;
animation: qris-halo-pulse 2.4s infinite ease-in-out;
pointer-events: none;
}
.qris-svg-success {
position: relative;
z-index: 1;
animation: qris-success-pop 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.qris-succ-orbit {
animation: qris-spin-slow 22s linear infinite;
transform-origin: center;
}
@keyframes qris-halo-pulse {
0%, 100% { transform: scale(0.95); opacity: 0.55; }
50% { transform: scale(1.15); opacity: 1; }
}
@keyframes qris-success-pop {
0% { transform: scale(0.65); opacity: 0; }
65% { transform: scale(1.08); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes qris-spin-slow {
to { transform: rotate(360deg); }
}
.qris-state-head {
font-size: 1.15rem;
font-weight: 800;
color: var(--text);
margin: 0 0 0.4rem;
}
.qris-state-desc {
font-size: 0.86rem;
color: var(--muted);
line-height: 1.5;
margin: 0 0 1rem;
}
.qris-bar-progress {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.08);
border-radius: 6px;
overflow: hidden;
margin-top: 0.5rem;
}
.qris-bar-fill {
width: 40%;
height: 100%;
background: linear-gradient(90deg, #10b981, #38bdf8);
border-radius: 6px;
animation: progress-indet 1.5s infinite ease-in-out;
}
@keyframes progress-indet {
0% { transform: translateX(-100%); }
50% { transform: translateX(100%); }
100% { transform: translateX(250%); }
}
.qris-email-note {
display: flex;
align-items: flex-start;
gap: 0.65rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 10px;
padding: 0.75rem 1rem;
font-size: 0.8rem;
color: var(--muted);
line-height: 1.5;
margin-bottom: 1.2rem;
text-align: left;
}
.qris-email-note .email-note-icon {
width: 18px;
height: 18px;
color: #38bdf8;
flex: none;
margin-top: 2px;
}
.qris-error-icon-wrap {
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.3);
color: #f59e0b;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.8rem;
animation: warn-glow 2.5s infinite ease-in-out;
}
.qris-error-icon-wrap .error-big-icon {
width: 32px;
height: 32px;
}
.qris-finish-actions {
display: flex;
flex-direction: column;
gap: 0.6rem;
width: 100%;
}
.btn-qris-done {
width: 100%;
padding: 12px;
border-radius: 10px;
background: #10b981;
color: #ffffff;
font-weight: 700;
font-size: 0.9rem;
border: none;
cursor: pointer;
transition: background 0.2s;
}
.btn-qris-done:hover {
background: #059669;
}
.btn-qris-cs {
font-size: 0.8rem;
color: var(--muted);
text-decoration: underline;
}
/* Tombol Aksi Verifikasi Pembayaran */
.qris-user-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 0.35rem;
}
.btn-qris-verify {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
padding: 12px 18px;
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
color: #ffffff;
font-size: 0.92rem;
font-weight: 700;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 15px rgba(2, 132, 199, 0.35);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-qris-verify:hover {
background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
box-shadow: 0 6px 20px rgba(2, 132, 199, 0.45);
transform: translateY(-1px);
}
.btn-qris-verify:active {
transform: translateY(0);
}
.btn-verify-icon {
width: 16px;
height: 16px;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-qris-verify:hover .btn-verify-icon {
transform: rotate(90deg);
}
.btn-qris-verify.loading {
opacity: 0.75;
pointer-events: none;
}
.btn-qris-verify.loading .btn-verify-icon {
animation: spin 0.8s linear infinite;
}
/* Tombol Pengiriman di Drawer Keranjang */
.mtd {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.mtd .mtd-icon {
width: 15px;
height: 15px;
flex: none;
}
.mtd-tag-auto {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 0.65rem;
font-weight: 750;
padding: 1px 6px;
border-radius: 4px;
background: rgba(56, 189, 248, 0.15);
color: #38bdf8;
letter-spacing: 0.2px;
}
.mtd-tag-auto .tag-icon {
width: 10px;
height: 10px;
}
.tag-habis-icon {
width: 11px;
height: 11px;
display: inline-block;
vertical-align: -1px;
margin-right: 3px;
}
#kode-pesan {
display: inline-flex;
align-items: center;
font-size: 0.76rem;
color: #f59e0b;
margin-top: 0.25rem;
margin-bottom: 0.35rem;
padding: 3px 8px;
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.2);
border-radius: 6px;
line-height: 1.35;
animation: fadeIn 0.2s ease;
}
#kode-pesan[hidden] {
display: none !important;
}
/* ================================================================
27. TOMBOL BATALKAN PEMBAYARAN QRIS & MODAL KONFIRMASI EMAIL
================================================================ */
/* Tombol Batalkan Pembayaran (QRIS) */
.btn-batal-qris {
background: rgba(239, 68, 68, 0.08) !important;
color: #f87171 !important;
border: 1px solid rgba(239, 68, 68, 0.25) !important;
font-size: 0.88rem !important;
font-weight: 650 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.45rem !important;
padding: 10px 16px !important;
border-radius: 12px !important;
cursor: pointer !important;
transition: all 0.25s var(--ease-spring) !important;
}
.btn-batal-qris .icon {
width: 16px;
height: 16px;
transition: transform 0.25s var(--ease-spring);
}
.btn-batal-qris:hover {
background: rgba(239, 68, 68, 0.16) !important;
border-color: rgba(239, 68, 68, 0.5) !important;
color: #fca5a5 !important;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(239, 68, 68, 0.22);
}
.btn-batal-qris:hover .icon {
transform: rotate(90deg);
}
.btn-batal-qris:active {
transform: scale(0.97) !important;
}
.btn-batal-qris.confirming {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.28) 0%, rgba(220, 38, 38, 0.38) 100%) !important;
border-color: #ef4444 !important;
color: #ffffff !important;
animation: pulse-batal 1.4s infinite ease-in-out;
box-shadow: 0 0 16px rgba(239, 68, 68, 0.45);
}
@keyframes pulse-batal {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
/* Modal Pop-Up Konfirmasi Pesanan Email */
.modal-konfirm-wrap .modal-konfirm-card {
max-width: 440px !important;
}
.konfirm-badge-highlight {
background: rgba(56, 189, 248, 0.12) !important;
color: #38bdf8 !important;
border: 1px solid rgba(56, 189, 248, 0.25) !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.35rem !important;
}
.konfirm-items-box {
background: var(--surface-2, rgba(255, 255, 255, 0.04));
border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
border-radius: 14px;
padding: 0.75rem 0.9rem;
max-height: 180px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.45rem;
margin-bottom: 0.75rem;
overscroll-behavior: contain;
}
.konfirm-item-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
padding: 0.4rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.konfirm-item-row:last-child {
border-bottom: none;
}
.konfirm-item-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.konfirm-item-title {
font-size: 0.85rem;
font-weight: 650;
color: var(--text, #f1f5f9);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.konfirm-item-meta {
font-size: 0.74rem;
color: var(--muted, #94a3b8);
}
.konfirm-item-price {
font-size: 0.85rem;
font-weight: 700;
color: var(--accent, #38bdf8);
flex: none;
}
.konfirm-hint-box {
display: flex;
align-items: flex-start;
gap: 0.55rem;
padding: 0.7rem 0.85rem;
background: rgba(56, 189, 248, 0.08);
border: 1px solid rgba(56, 189, 248, 0.22);
border-radius: 12px;
font-size: 0.78rem;
color: #bae6fd;
line-height: 1.45;
}
.konfirm-hint-box .icon {
width: 16px;
height: 16px;
flex: none;
color: #38bdf8;
margin-top: 1px;
}
.konfirm-btn-tidak {
background: var(--surface-2, rgba(255, 255, 255, 0.06)) !important;
color: var(--text, #f1f5f9) !important;
border: 1px solid var(--line, rgba(255, 255, 255, 0.14)) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.45rem !important;
padding: 0.75rem 0.9rem !important;
border-radius: 12px !important;
font-size: 0.86rem !important;
font-weight: 650 !important;
cursor: pointer !important;
transition: all 0.25s var(--ease-spring) !important;
}
.konfirm-btn-tidak:hover {
background: rgba(255, 255, 255, 0.12) !important;
border-color: rgba(255, 255, 255, 0.25) !important;
transform: translateY(-1px);
}
.konfirm-btn-tidak:active {
transform: scale(0.97) !important;
}
.konfirm-btn-yakin {
background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(16, 185, 129, 0.45) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.45rem !important;
padding: 0.75rem 0.9rem !important;
border-radius: 12px !important;
font-size: 0.86rem !important;
font-weight: 700 !important;
cursor: pointer !important;
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
transition: all 0.25s var(--ease-spring) !important;
}
.konfirm-btn-yakin:hover {
background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
box-shadow: 0 6px 22px rgba(16, 185, 129, 0.5);
transform: translateY(-1px);
}
.konfirm-btn-yakin:active {
transform: scale(0.97) !important;
}
/* ================================================================
28. MASTER TRANSITION UPGRADES (1000× LEBIH MENARIK)
Fisika Gerak Emil Kowalski & Apple-grade Interaction Polish
================================================================ */
/* 1. Global Interactive Feedback (Press Scale pada Elemen Sentuh) */
button:active,
.btn:active,
.iconbtn:active,
.mtd:active,
.addv:active,
.cat-pill:active,
.btn-copy-mini:active,
.modal-transaksi-tutup:active {
transform: scale(0.965) !important;
transition: transform 0.12s var(--ease-press) !important;
}
/* 2. Micro-Interactions Kartu Produk (Product Bento Grid) */
.grid .card {
transition: transform 0.32s var(--ease-spring),
box-shadow 0.32s var(--ease-spring),
border-color 0.28s var(--ease-soft),
background 0.28s var(--ease-soft) !important;
will-change: transform, box-shadow;
}
.grid .card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(56, 189, 248, 0.35) !important;
}
.grid .card:hover .c-logo {
transform: scale(1.08) rotate(-1.5deg) !important;
transition: transform 0.38s var(--ease-spring-bounce) !important;
}
.c-logo {
transition: transform 0.35s var(--ease-spring);
will-change: transform;
}
/* 3. Tombol Tambah ke Keranjang (+ / Add) */
.addv {
transition: transform 0.25s var(--ease-spring-bounce), background 0.2s ease, box-shadow 0.25s ease !important;
}
.addv:hover {
transform: scale(1.06) !important;
box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3) !important;
}
/* 4. Tab / Kategori Filter Pills */
.cat-pill {
transition: transform 0.25s var(--ease-spring),
background 0.25s ease,
border-color 0.25s ease,
color 0.22s ease,
box-shadow 0.25s var(--ease-spring) !important;
}
.cat-pill:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.3);
}
.cat-pill.on {
transform: scale(1.025);
}
/* 5. Barcode QRIS Card Hover Elevation */
.qris-qr-card {
transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-spring) !important;
}
.qris-qr-card:hover {
transform: scale(1.025);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 0 2px rgba(16, 185, 129, 0.45) !important;
}
/* 6. Toast Notification Spring Keyframes
DIHAPUS → transisi.css. Keyframe lama memakai animation !important,
sehingga mengalahkan sistem token (toast jadi tak bisa punya state
keluar, hanya "sekali muncul"). transisi.css sekarang pemilik tunggal
gerak toast, dan bisa masuk maupun keluar. */
/* 7. Cart Counter Bubble Spring Pop
DIHAPUS → transisi.css, alasan sama seperti di atas. */
/* 8. Floating Island Nav Smooth Glass Physics */
.header, .nav-island {
transition: transform 0.35s var(--ease-spring),
background 0.3s ease,
border-color 0.3s ease,
box-shadow 0.35s var(--ease-spring) !important;
}
/* ---------- 28. Status Dots & Pulse Animation ---------- */
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
position: relative;
}
.dot-online .status-dot, .status-dot.dot-online {
background-color: #10B981;
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
animation: pulseGreen 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}
.dot-slow .status-dot, .status-dot.dot-slow {
background-color: #F59E0B;
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
animation: pulseAmber 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}
.dot-break .status-dot, .status-dot.dot-break {
background-color: #6366F1;
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
animation: pulseIndigo 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}
.dot-rest .status-dot, .status-dot.dot-rest {
background-color: #8B5CF6;
box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7);
animation: pulsePurple 2.5s infinite cubic-bezier(0.4, 0, 0.6, 1);
}
@keyframes pulseGreen {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@keyframes pulseAmber {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
@keyframes pulseIndigo {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
@keyframes pulsePurple {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(139, 92, 246, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}
/* Nav Badge Operasional */
.badge-op-nav {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--surface-2, rgba(255, 255, 255, 0.08));
border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
color: var(--text, #f1f5f9);
padding: 4px 10px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.25s var(--ease-spring);
}
.badge-op-nav:hover {
background: var(--accent-soft, rgba(59, 130, 246, 0.15));
border-color: var(--accent, #3B82F6);
transform: translateY(-1px);
}
@media (max-width: 640px) {
.badge-op-nav { display: none; }
}
/* Hero Status Pill */
.hero-status-pill-wrap {
margin-bottom: 0.85rem;
}
.badge-jam-operasional {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--surface, #1e293b);
border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
padding: 6px 14px;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 600;
color: var(--text, #f1f5f9);
cursor: pointer;
transition: all 0.3s var(--ease-spring);
}
.badge-jam-operasional:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
border-color: var(--accent, #3B82F6);
}
.badge-jam-operasional .status-cta {
font-size: 0.74rem;
color: var(--accent, #3B82F6);
opacity: 0.9;
margin-left: 2px;
}
/* QRIS Banner Operasional */
.qris-operasional-banner {
background: rgba(30, 41, 59, 0.6);
border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
border-radius: 12px;
padding: 10px 12px;
font-size: 0.8rem;
transition: border-color 0.3s ease;
}
.qris-operasional-banner.dot-online { border-color: rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.06); }
.qris-operasional-banner.dot-slow { border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.06); }
.qris-operasional-banner.dot-break { border-color: rgba(99, 102, 241, 0.35); background: rgba(99, 102, 241, 0.06); }
.qris-operasional-banner.dot-rest { border-color: rgba(139, 92, 246, 0.35); background: rgba(139, 92, 246, 0.06); }
.qris-op-head {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 3px;
font-weight: 700;
}
.qris-op-desc {
font-size: 0.75rem;
color: var(--muted, #94a3b8);
line-height: 1.4;
margin: 0;
}
/* Modal Jadwal Operasional */
.jadwal-badge-highlight {
background: var(--accent-soft, rgba(59, 130, 246, 0.12));
color: var(--accent, #3B82F6);
}
.jadwal-current-box {
background: var(--surface-2, rgba(255, 255, 255, 0.04));
border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
border-radius: 14px;
padding: 12px 14px;
margin-bottom: 1rem;
}
.j-cur-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 4px;
}
.j-cur-time {
font-size: 1.1rem;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--text, #f1f5f9);
}
.j-cur-tag {
font-size: 0.72rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
background: rgba(16, 185, 129, 0.15);
color: #10B981;
}
.j-cur-tag.dot-slow { background: rgba(245, 158, 11, 0.15); color: #F59E0B; }
.j-cur-tag.dot-break { background: rgba(99, 102, 241, 0.15); color: #6366F1; }
.j-cur-tag.dot-rest { background: rgba(139, 92, 246, 0.15); color: #8B5CF6; }
.j-cur-note {
font-size: 0.8rem;
color: var(--muted, #94a3b8);
line-height: 1.45;
margin: 0;
}
.jadwal-list-grid {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1rem;
}
.jadwal-card-item {
background: var(--surface-2, rgba(255, 255, 255, 0.03));
border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
border-radius: 12px;
padding: 10px 12px;
}
.j-item-head {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
font-weight: 700;
color: var(--text, #f1f5f9);
margin-bottom: 6px;
padding-bottom: 4px;
border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.06));
}
.j-item-head svg {
width: 14px;
height: 14px;
color: var(--accent, #3B82F6);
}
.j-item-timings {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.j-item-timings li {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.77rem;
color: var(--muted, #cbd5e1);
}
.tag-fast {
color: #10B981;
font-weight: 700;
font-size: 0.72rem;
}
.tag-slow {
color: #F59E0B;
font-weight: 700;
font-size: 0.72rem;
}
.tag-break {
color: #6366F1;
font-weight: 700;
font-size: 0.72rem;
}
.tag-rest {
color: #8B5CF6;
font-weight: 700;
font-size: 0.72rem;
}
.jadwal-catatan-box {
display: flex;
gap: 10px;
background: rgba(59, 130, 246, 0.08);
border: 1px solid rgba(59, 130, 246, 0.22);
border-radius: 12px;
padding: 10px 12px;
font-size: 0.78rem;
line-height: 1.45;
color: var(--text, #f1f5f9);
}
.jadwal-catatan-box svg {
width: 18px;
height: 18px;
color: var(--accent, #3B82F6);
flex-shrink: 0;
margin-top: 2px;
}
.jadwal-catatan-box strong {
display: block;
font-size: 0.8rem;
margin-bottom: 2px;
}
.jadwal-catatan-box p {
margin: 0;
color: var(--muted, #94a3b8);
font-size: 0.75rem;
}
/* Wishlist Restock Button & Card */
.btn-wishlist-v {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
background: rgba(245, 158, 11, 0.15) !important;
color: #F59E0B !important;
border: 1px solid rgba(245, 158, 11, 0.35) !important;
padding: 4px 10px !important;
border-radius: 8px !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
pointer-events: auto !important;
cursor: pointer !important;
opacity: 1 !important;
text-decoration: none !important;
transition: all 0.22s var(--ease-spring) !important;
width: auto !important;
height: auto !important;
}
.btn-wishlist-v:hover {
background: #F59E0B !important;
color: #11141c !important;
transform: scale(1.04) translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
}
.btn-wishlist-v svg {
width: 13px !important;
height: 13px !important;
}
.sheet-wishlist-card {
margin-top: 1rem;
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.28);
border-radius: 14px;
padding: 12px 14px;
}
.wishlist-head {
display: flex;
gap: 10px;
margin-bottom: 0.75rem;
}
.wish-bell-icon {
width: 22px;
height: 22px;
color: #F59E0B;
flex-shrink: 0;
margin-top: 2px;
animation: bellRing 3s ease infinite;
}
@keyframes bellRing {
0%, 80%, 100% { transform: rotate(0); }
85% { transform: rotate(15deg); }
90% { transform: rotate(-15deg); }
95% { transform: rotate(10deg); }
}
.wishlist-head h4 {
font-size: 0.88rem;
color: var(--text, #f1f5f9);
margin-bottom: 3px;
}
.wishlist-head p {
font-size: 0.76rem;
color: var(--muted, #94a3b8);
line-height: 1.4;
margin: 0;
}
.btn-warning {
background: #F59E0B !important;
color: #11141c !important;
font-weight: 700 !important;
border: none !important;
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3) !important;
transition: all 0.25s var(--ease-spring) !important;
}
.btn-warning:hover {
background: #D97706 !important;
transform: translateY(-2px) scale(1.02) !important;
box-shadow: 0 8px 20px rgba(245, 158, 11, 0.45) !important;
}
/* ===== Perbaikan kontras font mode terang/gelap (2026-10-10) =====
Box peringatan & info di modal transaksi dulu memakai warna font
cerah (untuk kartu gelap). Sekarang ikut token tema supaya tetap
terbaca di mode terang maupun gelap. */
:root{
--peringatan-ink:#854d0e;
--peringatan-ink-kuat:#713f12;
--info-ink:#075985;
--info-ink-ikon:#0284c7;
}
:root[data-theme="dark"]{
--peringatan-ink:#fef08a;
--peringatan-ink-kuat:#fef08a;
--info-ink:#bae6fd;
--info-ink-ikon:#38bdf8;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--peringatan-ink:#fef08a;
--peringatan-ink-kuat:#fef08a;
--info-ink:#bae6fd;
--info-ink-ikon:#38bdf8;
}
}
.qris-warning-box{color:var(--peringatan-ink)}
.qris-warning-box strong{color:var(--peringatan-ink-kuat)}
.qris-warning-box .warn-icon{color:#d97706}
:root[data-theme="dark"] .qris-warning-box .warn-icon{color:#f59e0b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .qris-warning-box .warn-icon{color:#f59e0b}}
.konfirm-hint-box{color:var(--info-ink)}
.konfirm-hint-box .icon{color:var(--info-ink-ikon)}
.btn-qris-expand{color:var(--text);background:var(--surface-2);border-color:var(--line)}
.btn-qris-expand:hover{border-color:var(--line-strong)}
.qris-operasional-banner{background:var(--surface-2)}
.qris-operasional-banner .qris-op-head{color:var(--text)}
.qris-operasional-banner .qris-op-desc{color:var(--muted)}
.jadwal-banner, .modal-transaksi-badge{color:var(--text)}
/* =========================================================================
LAPIS MOBILE-FIRST 2026 — upgrade UI
Berada di paling akhir sehingga menang urutan. Tidak ada selector yang
dipakai JS diubah (tetap #grid, .app, .chip, #seg, #open-cart, .lompat).
========================================================================= */
/* ---------- 1. Kepala halaman: baris ke-2 navigasi bagian di layar sempit
Sebelumnya .lompat display:none <=999px => HP tanpa jalan pintas. */
@media (max-width:999px){
.nav-in{
height:54px;flex-wrap:nowrap;
column-gap:.45rem;padding-inline:10px;padding-block:0;
border-radius:999px;
overflow:visible;
}
.brand{order:1;flex:none;min-width:0}
.seg{order:2;margin-inline:0 auto;flex:none}
.nav-act{order:3;flex:none;min-width:0;margin-left:auto}
.lompat{display:none !important}
}
.lompat::before{
content:"";
position:absolute;left:0;top:0;bottom:0;
width:24px;
pointer-events:none;z-index:3;
background:linear-gradient(90deg,color-mix(in oklab,var(--surface) 92%,transparent) 0%,transparent 100%);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
.lompat::-webkit-scrollbar{display:none}
.lompat a{
min-height:44px;display:inline-flex;align-items:center;
padding:.2rem .45rem;font-size:.875rem;font-weight:600;
color:color-mix(in oklab,var(--text) 78%,transparent);white-space:nowrap;border-radius:999px;
transition:background .35s var(--ease),color .35s var(--ease);
}
.lompat a:first-child{margin-left:6px}
.lompat a::after{display:none}
.lompat a:hover,.lompat a:focus-visible{color:var(--text);background:var(--accent-soft)}
section[id]{scroll-margin-top:132px}
@media (min-width:1000px){
section[id]{scroll-margin-top:110px}
.lompat{-webkit-mask-image:none;mask-image:none}
.lompat::before{display:none}
}
/* ---------- 2. Kepala halaman muat di 360px (defisit ~140px sebelumnya) */
@media (max-width:520px){
.brand-name{display:none}
.nav-in{padding-inline:8px;column-gap:.4rem}
.nav-act{gap:.35rem}
.seg{padding:2px}
.seg button{padding:.5rem .6rem;font-size:.8rem}
}
/* Layar 320-380px: sisakan ikon akun saja (tombol tetap punya aria-label) */
@media (max-width:379px){
#akun-nama{display:none}
.akun-btn{padding:.5rem}
.seg button{padding:.5rem .5rem;font-size:.75rem}
}
/* ---------- 3. Target sentuh 44px (WCAG 2.5.8 / HIG) di ponsel */
@media (max-width:767px){
.seg button{min-height:44px;padding:.65rem .85rem}
.iconbtn{width:44px;height:44px}
#wa-nav{width:44px;height:44px;padding:0}
.akun-btn{min-height:44px;padding:.5rem .75rem}
.chip{min-height:44px;padding:.55rem .95rem}
.tautan-kontak{min-height:44px;align-items:center;padding:.35rem 0}
.badge-jam-operasional{min-height:44px;padding-block:.55rem}
.mtd{min-height:44px;padding:.6rem .8rem}
.isian input{height:44px;font-size:.95rem}
.addv{width:44px;height:44px}
.foot nav a{min-height:44px}
.btn-sm{min-height:44px}
.product-card,.card-add{min-height:44px}
}
/* ---------- 4. Keterbacaan katalog: teks >=14px & kolom lebih lega di HP.
74px menghasilkan kolom 76px dgn teks 11,8px -> 88px / 3 kolom. */
@media (max-width:759px){
#grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px 4px}
.app .nm{font-size:.875rem;line-height:1.3}
.app .hg{font-size:.875rem;font-weight:700}
.app .stk{font-size:.75rem}
.tag-kartu,.tag-stok{font-size:.75rem}
}
/* ---------- 5. Hero: skala judul & ritme vertikal yang pas di ponsel */
@media (max-width:767px){
.hero{padding-top:clamp(1.25rem,4vw,1.75rem);padding-bottom:1.25rem}
.hero h1,.hero .hero-h1{
font-size:clamp(1.65rem,6.2vw,2.15rem);
line-height:1.14;
letter-spacing:-.035em;max-width:none;
margin-bottom:0.65rem;
}
.hero p{
font-size:0.92rem;
line-height:1.48;
margin-bottom:1.15rem;
}
.hero-cta{
gap:0.5rem;
margin-bottom:0.9rem;
}
.hero-cta .btn{
padding:0.6rem 1.15rem;
font-size:0.88rem;
}
.hero-kontak{
gap:0.45rem;
font-size:0.78rem;
}
.badge-jam-operasional{
padding:0.35rem 0.75rem;
font-size:0.78rem;
margin-bottom:0.6rem;
}
.sec{padding-block:clamp(2.25rem,6vw,3.25rem)}
.sec-head{margin-bottom:clamp(1.25rem,4vw,1.75rem)}
}
@media (max-width:520px){
.hero-cta{flex-direction:column;align-items:stretch}
.hero-cta .btn{width:100%}
.hero-kontak{gap:1.25rem}
}
/* ---------- 6. Aksesibilitas fokus & label kecil */
.lompat a:focus-visible,.foot nav a:focus-visible,
.chip:focus-visible,.tautan-kontak:focus-visible,
.mtd:focus-visible,.addv:focus-visible{
outline:2px solid var(--accent);outline-offset:2px
}
/* ---------- 7. Aman untuk prefers-reduced-motion.
15 animasi loop sebelumnya tidak terjaga (pulse/spin/glow/bell). */
@media (prefers-reduced-motion:reduce){
.status-dot,.tag-stok,.qris-halo,.qris-circle-fill,.qris-check-draw,
.qris-success-pop,.qris-halo-pulse,.progress,.progress-indet,.spinner,
.bell-ring,.bellRing,[class*="pulse"],[class*="pulse-"],[class*="warn-glow"],
.radar-pulse,.spin,.spin-slow,.pulse-batal,.pulseGreen,.pulseAmber,
.pulseIndigo,.pulsePurple,.fadeIn{
animation:none !important
}
}
/* ---------- 8. Perbaikan target sentuh & laptop sempit.
- Tombol checkout "Tanya Stok via WhatsApp" hanya 26px (.drawer-foot
.btn-sm menang specificity) => wajib 44px di ponsel.
- Di 1000-1180px kepala halaman tidak wrap: pill status operasional
mendorong .nav-act sampai 125px melewati tepi (bodyW 1149 @1024).
Pill info yang sama sudah ada di hero (.badge-jam-operasional). */
@media (max-width:767px){
.drawer-foot .btn-sm{min-height:44px;border-radius:10px;font-size:.9rem}
.cart-back-btn{min-height:44px;padding:.6rem 1rem}
}
@media (max-width:1180px) and (min-width:1000px){
.badge-op-nav{display:none}
/* Wa tanpa label: label 150px masih membuat .nav-act 349px melewati
tepi 1024px. Ikonnya tetap 44px + aria-label. */
.wa-label{display:none}
#wa-nav{width:44px;padding:0;justify-content:center}
}
/* ---------- 9. Target sentuh di perangkat sentuh lintas ukuran layar.
Aturan 44px mobile berhenti di 767px sehingga tablet 768-1024px
(dan laptop layar sentuh) kehilangan jaminan tap target. */
@media (pointer:coarse){
.brand{min-height:44px}
.akun-btn{min-height:44px}
.iconbtn{min-width:44px;min-height:44px}
.badge-op-nav{min-height:44px;padding:.55rem 1rem}
.badge-jam-operasional{min-height:44px}
.cart-back-btn{min-height:44px;padding:.6rem 1rem}
.chip{min-height:44px}
.seg button{min-height:44px}
.hero-cta .btn{min-height:44px}
}
/* ---------- 8. Tampilan & target sentuh di layar sempit.
Brand logo sebelumnya 31px (di bawah 44px), dan tombol tema
disembunyikan sampai 430px sehingga HP 360px tidak punya jalan
mengganti tema sama sekali. Kedua hal itu diperbaiki di sini. */
@media (max-width:640px){
.brand{min-height:44px;align-items:center}
.brand-mark img{width:36px;height:36px}
}
@media (max-width:520px){
#theme{display:grid}
/* Label "Chat Admin" bikin baris atas pecah jadi 3 baris (kepala 172px).
Ikon + aria-label tetap, tombolnya tetap 44x44. */
.wa-label{display:none}
/* Sisakan ~10px supaya brand + seg + nav-act muat satu baris di 360px. */
.nav-in{column-gap:3px}
.nav-act{gap:3px}
}
/* =========================================================================
LAPIS 2026-10 — SHOWCASE DESKTOP
Ditambahkan paling akhir sehingga menang urutan. Fokus: kesan
profesional & modern di layar lebar (1440px+), tanpa merusak seluruh
lapis sebelumnya. Selector JS tidak diubah.
========================================================================= */
/* ---------- 1. Ritme ruang: lebih lega, lebih mahal ---------- */
@media (min-width:1024px){
.sec{padding:clamp(5.5rem,10vw,8.5rem) 0}
.hero{padding-block:clamp(5rem,10vw,8rem) clamp(3.5rem,6vw,5rem)}
}
/* ---------- 2. Hero: skala judul yang terkendali ----------
Judul hero setinggi 6.1rem pada 1440px menelan seluruh fold pertama
dan membuat panel kanan (hero-kaca) terasa seperti lampiran. Diturunkan
ke skala editorial yang tetap berwibawa tapi menyisakan ruang bernapas. */
@media (min-width:1024px){
#view-apps .hero h1, #view-apps .hero .hero-h1{
font-size:clamp(2rem,2.8vw,2.75rem);
line-height:1.1;letter-spacing:-.04em;max-width:18ch;
margin-bottom:1rem;
}
}
/* Ambient glow lembut di belakang hero — cahaya tunggal dari kobalt,
bukan gradasi pelangi. */
#view-apps .hero{position:relative}
@media (prefers-reduced-motion:no-preference){
#view-apps .hero::before{
content:"";position:absolute;inset:-10% -20% auto;height:70%;
z-index:-1;pointer-events:none;
background:radial-gradient(60% 70% at 30% 20%,
oklch(52% .208 264 / .07), transparent 70%);
}
}
/* ---------- 3. Nav: kurangi visual noise ----------
Pil status operasional + label "Admin Online Weekend" + tombol WA
berlabel + seg + cart + tema + akun = 7+ objek sejajar. Label WA
disembunyikan di desktop (icon tetap + aria-label), badge-op yang
ganda dengan hero disembunyikan. */
@media (min-width:1024px){
.nav-in{height:58px;padding-inline:14px;gap:.75rem}
.lompat{display:flex;align-items:center;gap:.35rem;margin-left:.6rem}
.lompat a{
font-size:.875rem;font-weight:600;color:color-mix(in oklab,var(--text) 72%,transparent);
padding:.35rem .75rem;border-radius:999px;white-space:nowrap;
transition:background .25s var(--ease),color .25s var(--ease);
}
.lompat a:hover,.lompat a:focus-visible{color:var(--text);background:var(--accent-soft)}
.badge-op-nav{display:none}
.wa-label{display:none}
#wa-nav{width:40px;height:40px;padding:0;justify-content:center}
.nav-act{gap:.45rem}
.seg{padding:2.5px}
.seg button{padding:.42rem .95rem;font-size:.86rem}
}
/* ---------- 4. catatan-hukum: callout info, bukan dump error ----------
Kotak peringatan merah-transparan dengan shield membaca sebagai
error. Diganti callout tenang dengan pita aksen kiri. */
.catatan-hukum{
display:flex;gap:.7rem;align-items:flex-start;
background:color-mix(in oklch,var(--accent) 5%,var(--surface));
border:1px solid color-mix(in oklch,var(--accent) 18%,transparent);
border-left:3px solid var(--accent);
border-radius:var(--r-input);
padding:.85rem 1rem;
font-size:.85rem;line-height:1.55;color:var(--muted);
box-shadow:none;
}
.catatan-hukum .icon{color:var(--accent);margin-top:.1rem}
/* ---------- 5. Flow (Cara Pesan): perhalus garis waktu tegak ----------
Lapis 11 sudah menegakkan flow jadi garis waktu; di sini hanya
dipertegas ritme & kontras angkanya, tanpa mengembalikan 3 kolom. */
@media (min-width:1024px){
.flow{max-width:960px;margin-inline:auto}
.flow li{padding-block:clamp(2rem,3.5vw,2.75rem)}
.flow li::before{color:color-mix(in oklch,var(--accent) 55%,var(--muted))}
}
/* ---------- 6. Band CTA: pusatkan & perkuat di desktop ----------
CTA gelap dengan konten rata kiri di 1440px terasa hambar saat
selebar layar. Dipusatkan dengan max-width terkontrol. */
@media (min-width:1024px){
.band{
flex-direction:column;align-items:center;text-align:center;
padding:clamp(3rem,5vw,4.5rem) clamp(2rem,4vw,3rem);
}
.band > div{margin-inline:auto}
.band h2{max-width:26ch}
.band p{max-width:52ch;margin-inline:auto}
}
/* ---------- 7. Footer: grid rapi di desktop ----------
Flex-wrap menghasilkan dua kolom tidak seimbang di 1440px. Diganti
grid dua kolom: brand / nav (nav sendiri jadi kisi 2 kolom tautan). */
@media (min-width:900px){
footer .wrap > .foot{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
gap:clamp(2rem,5vw,4rem);
}
.foot nav{
display:grid;grid-template-columns:1fr 1fr;
gap:.35rem 1.5rem;align-content:start;
}
.foot nav a{padding-block:.3rem}
}
/* ---------- 8. Selubung section berlatar lembut ----------
Alterasi latar sangat tipis antar section besar membantu pemisah
visual tanpa memutus bahasa monokrom. */
#cara{background:color-mix(in oklch,var(--surface-2) 55%,transparent)}
#faq{background:color-mix(in oklch,var(--surface-2) 55%,transparent)}
/* ---------- 9. Hero-kaca: rapikan di desktop ----------
Panel etalase: kurangi padding berlebih, perjelas hierarki. */
@media (min-width:1024px){
.hero-kaca{padding:1.5rem}
.hero-kaca-hitung{font-size:2.7rem}
.hero-tiles{gap:.8rem}
}
/* ---------- 10. Kartu produk (.app) & toolbar katalog ----------
Di desktop, baris produk dengan grid kolom ganda sudah rapi; tambah
pemisah visual tipis antar bagian tools. */
@media (min-width:1024px){
.tools{
flex-direction:row;flex-wrap:wrap;align-items:center;
justify-content:space-between;gap:1.25rem;
}
}
/* ---------- 11. Testimoni (#testimoni, hidden by default) ----------
Saat ditampilkan, beri ritme section standar. */
#testimoni{background:transparent}
/* ---------- 12. FAQ polish ----------
Summary dengan chevron di ujung kanan; tambah hover ringan & focus. */
.faq summary{
border-radius:10px;padding-inline:.25rem;
transition:color .3s var(--ease-halus),background .3s var(--ease-halus);
}
.faq summary:hover{color:var(--text)}
.faq details[open] summary{color:var(--accent)}
/* ---------- 13. Tombol aksi utama ----------
Primary: bayangan lebih dalam, hover angkat halus. */
@media (min-width:1024px){
.btn-primary{
box-shadow:0 10px 28px -14px color-mix(in oklch,var(--accent) 80%,transparent);
}
.btn-primary:hover{
transform:translateY(-1px);
box-shadow:0 14px 34px -14px color-mix(in oklch,var(--accent) 85%,transparent);
}
.btn-ghost:hover{transform:translateY(-1px)}
}
/* ---------- 14. Judul bagian: garis aksen editorial ----------
Eyebrow pill sudah ada; di sini dipertegas dengan margin bawah
yang lebih lapang di desktop. */
@media (min-width:1024px){
.sec-head{margin-bottom:clamp(3rem,5vw,4.5rem)}
.sec-head h2{max-width:20ch}
.sec-head p{max-width:62ch}
}
/* ---------- 16. Kepala halaman ponsel: jarak & keseimbangan ----------
Dua masalah di 390px:
1) `.seg{margin-inline:0 auto}` (margin-kanan auto) membuat pill
Apps/Jasa nempel 3px dari logo, sementara semua ruang sisa
jongkok di antara pill dan tombol ikon -> terlihat miring/
tidak seimbang. Dikasih jarak tetap, sisa ruang tetap ke kanan.
2) Baris lompat cuma isi sampai 303px dari 381px -> 78px kosong di
kanan. Link disebar rata supaya seimbang dengan baris atas. */
@media (max-width:999px){
.nav-in > .seg{margin-inline:0;margin-left:.5rem}
.nav-in > .lompat{justify-content:space-between;padding:.25rem 10px .2rem 16px}
.nav-in > .lompat a{padding-inline:.42rem}
.nav-in > .lompat a:first-child{margin-left:6px}
}
@media (max-width:520px){
.nav-in > .seg{margin-left:.4rem}
}
/* ---------- 17. Katalog HP & Multi-Device: 4 Kolom Ke Kanan ----------
Sesuai arahan: produk selalu 4 kolom ke kanan × ke bawah di semua tier layar
(Mobile, Tablet, Desktop) dengan layout rapih, teks tidak terpotong kata,
harga jelas, dan badge stok proporsional. */
#grid{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:8px 4px !important;
}
@media (max-width:767px){
.wa-label{display:none !important}
#wa-nav{width:44px;height:44px;padding:0}
#grid{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:8px 4px !important;
}
.app{
padding:8px 5px 7px !important;
border-radius:12px !important;
gap:.25rem !important;
min-height:114px !important;
}
.app .thumb, .app .logo, .app .logo-g{
width:34px !important;
height:34px !important;
border-radius:9px !important;
}
.app .nm{
font-size:.71rem !important;
line-height:1.18 !important;
margin-top:2px !important;
min-height:2.1em !important;
word-break:normal !important;
overflow-wrap:normal !important;
white-space:normal !important;
display:-webkit-box !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
hyphens:none !important;
}
.app .hg{
font-size:.70rem !important;
line-height:1.12 !important;
margin-top:1px !important;
display:flex !important;
flex-wrap:wrap !important;
align-items:baseline !important;
gap:2px !important;
}
.app .hg .now{
font-size:.76rem !important;
font-weight:700 !important;
}
.app .stk{
font-size:.58rem !important;
font-weight:600 !important;
padding:2px 5px !important;
border-radius:999px !important;
margin-top:2px !important;
white-space:nowrap !important;
}
}
@media (min-width:768px) and (max-width:1023px){
#grid{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:12px 10px !important;
}
.app{
padding:10px 8px 8px !important;
border-radius:14px !important;
gap:.35rem !important;
}
.app .thumb, .app .logo, .app .logo-g{
width:40px !important;
height:40px !important;
border-radius:11px !important;
}
.app .nm{
font-size:.82rem !important;
line-height:1.25 !important;
word-break:normal !important;
}
.app .hg .now{
font-size:.85rem !important;
}
.app .stk{
font-size:.64rem !important;
}
}
@media (min-width:1024px){
#grid{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:16px !important;
}
}
/* ================================================================
* MODAL HASIL PEMBELIAN (IMMERSIVE SUKSES) & UPLOAD BUKTI (STITCH v4)
* ================================================================ */
#scrim-sukses-order {
z-index: 100002 !important;
}
.modal-sukses-wrap {
z-index: 100003 !important;
}
#scrim-ditolak {
z-index: 100004 !important;
}
.modal-ditolak-wrap {
z-index: 100005 !important;
}
#scrim-upload-bukti {
z-index: 100007 !important;
}
.modal-upload-wrap {
z-index: 100008 !important;
}
.modal-sukses-card {
width: 100%;
max-width: 520px !important;
max-height: 94dvh !important;
border: 1px solid rgba(16,185,129,0.3) !important;
box-shadow: 0 25px 70px -15px rgba(0,0,0,0.9), 0 0 40px -10px rgba(16,185,129,0.2) !important;
overscroll-behavior: contain;
}
.modal-ditolak-card {
width: 100%;
max-width: 520px !important;
max-height: 94dvh !important;
border: 1px solid rgba(239,68,68,0.35) !important;
box-shadow: 0 25px 70px -15px rgba(0,0,0,0.9), 0 0 40px -10px rgba(239,68,68,0.2) !important;
overscroll-behavior: contain;
}
.ditolak-badge-highlight {
background: rgba(239,68,68,0.15) !important;
color: #F87171 !important;
border: 1px solid rgba(239,68,68,0.35) !important;
}
.ditolak-alert-box {
display: flex;
align-items: flex-start;
gap: .85rem;
background: rgba(239,68,68,0.08);
border: 1px solid rgba(239,68,68,0.3);
border-radius: 14px;
padding: .95rem 1.1rem;
margin-top: .75rem;
}
.ditolak-icon-circle {
width: 38px;
height: 38px;
min-width: 38px;
border-radius: 50%;
background: rgba(239,68,68,0.18);
color: #EF4444;
display: flex;
align-items: center;
justify-content: center;
}
.ditolak-alert-text strong {
display: block;
font-size: .95rem;
color: #EF4444;
font-weight: 700;
margin-bottom: 2px;
}
.ditolak-alert-text p {
margin: 0;
font-size: .83rem;
color: #FCA5A5;
line-height: 1.45;
}
.ditolak-email-note {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: .78rem;
color: var(--muted, #94a3b8);
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: .65rem .85rem;
line-height: 1.4;
margin-top: .6rem;
}
.btn-wa-ditolak {
background: #25D366 !important;
border-color: #25D366 !important;
color: #ffffff !important;
font-weight: 700 !important;
box-shadow: 0 4px 14px rgba(37,211,102,0.35) !important;
}
.btn-wa-ditolak:hover {
background: #20BA5A !important;
border-color: #20BA5A !important;
}
@media (max-width: 639px) {
.modal-sukses-wrap, .modal-ditolak-wrap {
align-items: flex-end !important;
padding: 0 !important;
}
.modal-sukses-card, .modal-ditolak-card {
border-radius: 24px 24px 0 0 !important;
max-height: 94dvh !important;
padding: 1.3rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
}
.modal-upload-wrap {
align-items: flex-end !important;
padding: 0 !important;
}
.modal-upload-card {
border-radius: 24px 24px 0 0 !important;
max-height: 94dvh !important;
padding: 1.3rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
}
}
@media (min-width: 640px) {
.modal-sukses-wrap, .modal-ditolak-wrap, .modal-upload-wrap {
align-items: center !important;
padding: 1.5rem !important;
}
.modal-sukses-card, .modal-ditolak-card {
border-radius: 24px !important;
}
.modal-upload-card {
border-radius: 24px !important;
}
}
.sukses-badge-highlight {
background: rgba(16,185,129,0.15) !important;
color: #34D399 !important;
border: 1px solid rgba(16,185,129,0.35) !important;
}
.sukses-id-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 14px;
padding: .75rem 1rem;
}
.sukses-id-label {
font-size: .8rem;
color: var(--muted, #94a3b8);
display: block;
}
.sukses-id-val {
font-family: var(--font-mono, monospace);
font-size: 1.15rem;
font-weight: 800;
color: #10B981;
letter-spacing: .04em;
}
.btn-copy-prominent {
background: rgba(16,185,129,0.15) !important;
border: 1px solid rgba(16,185,129,0.4) !important;
color: #34D399 !important;
padding: 6px 14px !important;
border-radius: 999px !important;
font-size: .82rem !important;
font-weight: 700 !important;
transition: all .2s ease;
display: inline-flex;
align-items: center;
gap: 5px;
cursor: pointer;
touch-action: manipulation;
}
.btn-copy-prominent:hover {
background: #10B981 !important;
color: #fff !important;
transform: translateY(-1px);
}
.sukses-kredensial-box {
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 16px;
padding: 1rem 1.1rem;
margin-top: .4rem;
}
.sk-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: .85rem;
}
.sk-head-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(245,158,11,0.12);
border: 1px solid rgba(245,158,11,0.3);
color: #fbbf24;
padding: 4px 10px;
border-radius: 999px;
font-size: .75rem;
font-weight: 700;
transition: all 0.2s ease;
}
.sk-head-badge.menunggu {
background: rgba(245,158,11,0.12);
border: 1px solid rgba(245,158,11,0.3);
color: #fbbf24;
}
.sk-head-badge.aktif {
background: rgba(16,185,129,0.12);
border: 1px solid rgba(16,185,129,0.3);
color: #34D399;
}
.sk-head-badge.diklaim {
background: rgba(239,68,68,0.12);
border: 1px solid rgba(239,68,68,0.3);
color: #f87171;
}
.sk-head-badge.nogaransi {
background: rgba(148,163,184,0.12);
border: 1px solid rgba(148,163,184,0.25);
color: #94a3b8;
}
.sk-field-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: .65rem;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 12px;
padding: .65rem .85rem;
}
.sk-field-content {
flex: 1;
min-width: 0;
}
.sk-field-label {
display: block;
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--muted, #94a3b8);
margin-bottom: 2px;
}
.sk-field-input {
background: transparent;
border: none;
outline: none;
color: #f8fafc;
font-family: var(--font-mono, monospace);
font-size: .95rem;
font-weight: 700;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.btn-copy-pill {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--accent, #3b82f6);
color: #fff;
border: none;
border-radius: 8px;
padding: 6px 12px;
font-size: .78rem;
font-weight: 700;
cursor: pointer;
flex-shrink: 0;
white-space: nowrap;
touch-action: manipulation;
transition: all .2s ease;
}
.btn-copy-pill:hover {
filter: brightness(1.15);
transform: translateY(-1px);
}
.btn-salin-semua {
width: 100%;
margin-top: .85rem;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.15);
color: #f1f5f9;
border-radius: 10px;
padding: 10px;
font-size: .83rem;
font-weight: 700;
cursor: pointer;
touch-action: manipulation;
transition: all .2s ease;
}
.btn-salin-semua:hover {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.25);
}
.btn-copy-pill.copied,
.btn-copy-prominent.copied,
.btn-salin-semua.copied {
background: #10B981 !important;
color: #fff !important;
border-color: #10B981 !important;
}
@media (max-width: 380px) {
.sk-field-row {
flex-direction: column !important;
align-items: stretch !important;
gap: .5rem !important;
padding: .65rem .75rem !important;
}
.btn-copy-pill {
width: 100% !important;
justify-content: center !important;
}
.sukses-id-box {
flex-direction: column !important;
align-items: stretch !important;
gap: .5rem !important;
}
.btn-copy-prominent {
width: 100% !important;
justify-content: center !important;
}
}
.sk-censor-note {
display: flex;
align-items: center;
gap: 8px;
background: rgba(239,68,68,0.12);
border: 1px solid rgba(239,68,68,0.3);
color: #F87171;
border-radius: 10px;
padding: 9px 12px;
margin-top: .75rem;
font-size: .8rem;
line-height: 1.4;
}
.btn-kirim-bukti-cta {
background: linear-gradient(135deg, #10B981, #059669) !important;
color: #fff !important;
font-weight: 800 !important;
font-size: .95rem !important;
padding: .85rem !important;
border-radius: 12px !important;
box-shadow: 0 8px 24px -6px rgba(16,185,129,0.5) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
min-height: 48px !important;
touch-action: manipulation !important;
}
.sukses-struk-details {
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: .65rem .85rem;
font-size: .82rem;
}
.sukses-struk-details summary {
cursor: pointer;
font-weight: 600;
color: var(--muted);
display: flex;
align-items: center;
gap: 6px;
}
.sukses-struk-pre {
margin-top: .65rem;
font-family: var(--font-mono, monospace);
font-size: .78rem;
line-height: 1.5;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
padding: 10px;
white-space: pre-wrap;
word-break: break-all;
color: #cbd5e1;
}
/* Upload Dropzone */
.modal-upload-card {
max-width: 460px !important;
}
.upload-dropzone {
border: 2px dashed rgba(255,255,255,0.22);
border-radius: 16px;
padding: 1.6rem 1.2rem;
text-align: center;
cursor: pointer;
background: rgba(255,255,255,0.025);
transition: all .25s ease;
margin-top: .4rem;
user-select: none;
touch-action: manipulation;
}
.upload-dropzone:hover, .upload-dropzone.dragover {
border-color: #3B82F6;
background: rgba(59,130,246,0.08);
}
.dropzone-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(59,130,246,0.15);
color: #60A5FA;
margin: 0 auto .75rem;
display: grid;
place-items: center;
}
.upload-dropzone strong {
display: block;
font-size: .95rem;
color: var(--text);
margin-bottom: 4px;
}
.upload-dropzone p {
font-size: .8rem;
color: var(--muted);
margin: 0;
line-height: 1.4;
}
.dropzone-preview img {
max-width: 100%;
max-height: 220px;
object-fit: contain;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.14);
box-shadow: 0 8px 24px -8px rgba(0,0,0,0.7);
margin-bottom: .75rem;
}
.btn-ganti-foto {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.22);
color: #fff;
border-radius: 999px;
padding: 6px 14px;
font-size: .8rem;
font-weight: 600;
cursor: pointer;
min-height: 38px;
touch-action: manipulation;
transition: all .2s ease;
}
.btn-ganti-foto:hover {
background: rgba(255,255,255,0.16);
}
/* ================================================================
* SECTION RATING & ULASAN TOKO (STITCH v4 OPEN DESIGN)
* ================================================================ */
.sec-ulasan {
padding-top: clamp(3rem, 5vw, 4.5rem);
padding-bottom: clamp(2rem, 4vw, 3.5rem);
border-top: 1px solid var(--line);
}
.sec-head-center {
text-align: center;
max-width: 640px;
margin: 0 auto 2rem;
}
.sec-head-center h2 {
font-size: clamp(1.5rem, 3.2vw, 2.1rem);
letter-spacing: -.03em;
font-weight: 800;
margin: .35rem 0 .5rem;
}
.sec-eyebrow-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.3);
color: #FBBF24;
padding: 4px 12px;
border-radius: 999px;
font-size: .78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
}
.gold-star-pulse {
color: #F59E0B;
animation: starPulse 2s ease infinite;
}
@keyframes starPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.8; }
}
/* Bento Summary Card */
.rating-summary-card {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
background: linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 16px 36px -12px rgba(0,0,0,0.6);
border-radius: 20px;
padding: 1.5rem;
margin-bottom: 2rem;
}
@media (min-width: 768px) {
.rating-summary-card {
grid-template-columns: 240px 1fr;
align-items: center;
padding: 2rem 2.2rem;
}
}
.rating-score-block {
text-align: center;
border-bottom: 1px solid var(--line);
padding-bottom: 1.25rem;
}
@media (min-width: 768px) {
.rating-score-block {
border-bottom: none;
border-right: 1px solid var(--line);
padding-bottom: 0;
padding-right: 1.75rem;
}
}
.score-number-row {
display: flex;
align-items: baseline;
justify-content: center;
gap: 4px;
}
.score-big {
font-size: 3.2rem;
font-weight: 900;
letter-spacing: -.04em;
color: #FBBF24;
line-height: 1;
}
.score-max {
font-size: 1.1rem;
color: var(--muted);
font-weight: 700;
}
.score-stars-row {
display: flex;
justify-content: center;
gap: 3px;
margin: 6px 0 4px;
font-size: 1.25rem;
}
.star-gold {
color: #F59E0B;
}
.star-gray {
color: rgba(255,255,255,0.2);
}
.score-label {
font-size: .82rem;
color: var(--muted);
font-weight: 600;
}
.rating-trust-badges {
display: flex;
flex-direction: column;
gap: .85rem;
}
@media (min-width: 640px) {
.rating-trust-badges {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
}
.trust-badge-item {
display: flex;
align-items: flex-start;
gap: .75rem;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
padding: .75rem .9rem;
}
.trust-badge-icon {
width: 34px;
height: 34px;
border-radius: 10px;
background: rgba(16,185,129,0.12);
color: #34D399;
display: grid;
place-items: center;
flex-shrink: 0;
}
.trust-badge-text strong {
display: block;
font-size: .84rem;
color: var(--text);
margin-bottom: 2px;
}
.trust-badge-text small {
display: block;
font-size: .74rem;
color: var(--muted);
line-height: 1.35;
}
/* Grid Kartu Ulasan */
.ulasan-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
list-style: none;
padding: 0;
margin: 0;
}
@media (min-width: 640px) {
.ulasan-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.ulasan-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.ulas-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 18px;
padding: 1.25rem;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: var(--shadow);
transition: transform .28s var(--ease-spring), border-color .28s ease, box-shadow .28s ease;
}
.ulas-card:hover {
transform: translateY(-3px);
border-color: rgba(245, 158, 11, 0.4);
box-shadow: 0 16px 35px -10px rgba(0,0,0,0.15), 0 0 20px -8px rgba(245, 158, 11, 0.2);
}
.ulas-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-bottom: .85rem;
}
.ulas-stars {
display: inline-flex;
gap: 2px;
font-size: 1rem;
}
.ulas-verified-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: .72rem;
font-weight: 700;
color: #10B981;
background: rgba(16,185,129,0.12);
border: 1px solid rgba(16,185,129,0.25);
padding: 3px 8px;
border-radius: 999px;
}
.ulas-verified-badge svg,
.icon-mini,
svg.icon-mini {
width: 13px !important;
height: 13px !important;
max-width: 13px !important;
max-height: 13px !important;
min-width: 13px !important;
min-height: 13px !important;
flex-shrink: 0 !important;
display: inline-block !important;
vertical-align: middle !important;
}
.ulas-kutipan {
font-size: .88rem;
line-height: 1.55;
color: var(--text);
margin: 0 0 1.1rem;
flex-grow: 1;
}
.ulas-card-foot {
display: flex;
align-items: center;
gap: .75rem;
padding-top: .85rem;
border-top: 1px solid var(--line);
}
.ulas-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, #3B82F6, #10B981);
color: #fff;
font-weight: 800;
font-size: .95rem;
display: grid;
place-items: center;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.ulas-user-meta {
flex: 1;
min-width: 0;
}
.ulas-buyer-name {
display: block;
font-size: .88rem;
font-weight: 750;
color: var(--text, #f1f5f9);
letter-spacing: .02em;
}
.ulas-sub-info {
display: flex;
align-items: center;
gap: 6px;
font-size: .74rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
}
.ulas-product-tag {
color: #60A5FA;
font-weight: 600;
}
.ulas-dot {
color: var(--line-strong, rgba(255,255,255,0.2));
}
.ulas-date {
color: var(--muted);
}
.ulasan-action-wrap {
text-align: center;
margin-top: 2rem;
}
/* =========================================================================
18. POLISH 2026-10-18 — refinemen visual modern (last-wins)
Tak mengubah ID, kelas JS, atau teks tampilan. Hanya lapisan ketokisan.
========================================================================= */
/* --- Kartu katalog: hover ring aksen + bayangan dalam --- */
@media (hover:hover){
.app:hover{
box-shadow:0 10px 24px -12px oklch(16% .12 264/.16),inset 0 1px 0 #FFFFFF;
border-color:var(--line-strong);
}
:root[data-theme="dark"] .app:hover{
box-shadow:0 14px 30px -14px oklch(0% 0 0/.55),inset 0 1px 0 oklch(100% 0 0/.08);
}
}
.app .nm{font-family:'Plus Jakarta Sans','Jakarta',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.02em}
.app .now{font-variant-numeric:tabular-nums}
/* --- Tombol: pill primer + press spring --- */
.btn-primary{border-radius:999px;box-shadow:0 6px 16px -8px oklch(52% .208 264/.4)}
.btn-primary:active{transform:translateY(1px);transition:transform .12s cubic-bezier(.4,0,.2,1)}
.btn-ghost{border-radius:999px;}
/* --- Section header: judul presisi --- */
.sec-head h2{font-family:'Plus Jakarta Sans','Jakarta',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.045em;text-rendering:optimizeLegibility}
/* --- Cara pesan: 3 kartu langkah di layar lebar --- */
@media (min-width:900px){
#cara .flow{grid-template-columns:repeat(3,1fr);max-width:none}
#cara .flow li{padding:clamp(2rem,4vw,2.75rem) 1.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
}
/* --- FAQ: lebar terbatas agar baris tidak terlalu panjang --- */
#faq .faq{margin-inline:auto;max-width:860px}
/* --- Dark mode: depth lewat border halus pada kartu --- */
:root[data-theme="dark"] .app{border-color:oklch(100% 0 0/.06)}
/* =========================================================================
19. MODERN THEME 2026-10 — rombak UI/UX (last-wins, non-destructif)
4-layer token, floating island navbar + ⌘K, double-bezel cards,
spring motion, responsif mobile/tablet/desktop/ultrawide.
Semua kelas & ID JS dipertahankan. @font-face di bawahnya tak disentuh.
========================================================================= */
/* ---------- 19.1 Token 4-layar ---------- */
:root{
--bg:oklch(99.2% 0 0);
--surface:oklch(100% 0 0);
--surface-2:oklch(98.4% .003 250);
--surface-3:oklch(96.5% .005 255);
--text:oklch(18% .012 260);
--text-strong:oklch(10% .015 260);
--muted:oklch(50% .01 260);
--line:oklch(18% .012 260/.07);
--line-strong:oklch(18% .012 260/.14);
--accent:oklch(56% .19 262); /* cobalt — aksen tunggal */
--accent-ink:oklch(100% 0 0);
--accent-soft:oklch(56% .19 262/.09);
--destructive:oklch(54% .21 28);
--shadow-1:0 1px 2px oklch(18% .012 260/.05);
--shadow-2:0 6px 18px -8px oklch(18% .012 260/.09);
--shadow-3:0 18px 40px -14px oklch(18% .012 260/.14);
--bezel-inner:inset 0 1px 0 oklch(100% 0 0/.65);
--bezel-dark:inset 0 1px 0 oklch(0% 0 0/.25);
--r-pill:999px;
--r-card:20px;
--r-lg:30px;
--ease-spring:cubic-bezier(.16,1,.3,1);
--ease-press:cubic-bezier(.4,0,.2,1);
color-scheme:light;
}
:root[data-theme="dark"]{
--bg:oklch(13% .01 260);
--surface:oklch(17% .012 260);
--surface-2:oklch(21% .014 260);
--surface-3:oklch(25% .016 260);
--text:oklch(97% .004 260);
--text-strong:oklch(99% 0 0);
--muted:oklch(64% .012 260);
--line:oklch(100% 0 0/.09);
--line-strong:oklch(100% 0 0/.18);
--accent:oklch(72% .145 262);
--accent-ink:oklch(14% .03 260);
--accent-soft:oklch(72% .145 262/.14);
--destructive:oklch(62% .2 28);
--shadow-1:0 1px 2px oklch(0% 0 0/.45);
--shadow-2:0 8px 24px -10px oklch(0% 0 0/.5);
--shadow-3:0 24px 48px -18px oklch(0% 0 0/.7);
--bezel-inner:inset 0 1px 0 oklch(100% 0 0/.12);
--bezel-dark:inset 0 1px 0 oklch(0% 0 0/.45);
color-scheme:dark;
}
/* ---------- 19.2 Dasar ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;max-width:100vw;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
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;
}
h1,h2,h3,.hero-h1,.sec-head h2,.flow h3,.nm,.score-big{
font-family:'Plus Jakarta Sans','Jakarta',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
letter-spacing:-.035em;
}
.now,.score-big,.kode-atas,.chip{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:20px}
section[id]{scroll-margin-top:88px}
/* ---------- 19.3 Navbar floating island + ⌘K ---------- */
.nav{
position:sticky;top:10px;z-index:60;
background:color-mix(in srgb,var(--surface) 86%,transparent);
border:1px solid var(--line);
border-radius:999px;
box-shadow:var(--shadow-2),var(--bezel-inner);
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
margin:0 12px;padding:7px 14px;
transition:all .25s var(--ease);
}
:root[data-theme="dark"] .nav{
background:color-mix(in srgb,var(--surface) 85%,transparent);
border-color:rgba(255,255,255,.14);
box-shadow:0 14px 36px -12px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.15);
}
.nav-in{
height:54px;display:flex;align-items:center;justify-content:space-between;
gap:.6rem;flex-wrap:nowrap;width:100%;
}
.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;flex-shrink:0}
.brand-mark img{width:38px;height:38px;border-radius:11px;box-shadow:var(--shadow-1)}
.brand-name{
font-size:.96rem;font-weight:800;letter-spacing:-.025em;color:var(--text);
display:inline-block !important;
}
.seg{
background:var(--surface-2);padding:3px;border-radius:999px;
border:1px solid var(--line);display:flex;align-items:center;flex-shrink:0;
}
.seg button{
padding:.42rem .8rem;font-size:.82rem;font-weight:700;border-radius:999px;
min-height:36px;
}
.nav-act{display:flex;align-items:center;gap:.45rem;margin-left:auto;flex-shrink:0}
.nav-act .iconbtn{
width:42px !important;height:42px !important;border-radius:50% !important;
display:inline-flex;align-items:center;justify-content:center;
}
.nav-act .akun-btn{
min-height:42px !important;padding:.42rem .85rem !important;
font-size:.84rem !important;font-weight:700 !important;border-radius:999px;
}
.cmd-k{
display:none;align-items:center;gap:.35rem;
padding:.32rem .75rem;border:1px solid var(--line-strong);
border-radius:var(--r-pill);background:var(--surface-2);color:var(--text);
font-size:.82rem;font-weight:600;margin-left:auto;
}
.cmd-k kbd{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--muted)}
.cmd-k:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.cmd-k:active{transform:scale(.96);transition:transform .12s var(--ease-press)}
.nav .icon{font-size:1.25rem}
@media (min-width:900px){
.nav{top:14px;margin:0 auto;max-width:1220px;padding:8px 20px}
.nav-in{height:58px;gap:1rem}
.brand-mark img{width:42px;height:42px}
.brand-name{font-size:1.05rem}
.cmd-k{display:inline-flex}
.nav-act{margin-left:0}
}
@media (max-width:375px){
.nav{margin:0 8px;padding:5px 10px;top:8px}
.nav-in{height:50px;gap:.4rem}
.brand-name{font-size:.85rem}
.brand-mark img{width:34px;height:34px}
.seg button{padding:.35rem .6rem;font-size:.78rem}
}
/* ---------- 19.4 Hero ---------- */
.hero{padding:clamp(3rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,6vw,4rem);align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.15fr 1fr}}
.hero .kicker{
display:inline-flex;align-items:center;gap:.45rem;
padding:.32rem .85rem;border:1px solid var(--line-strong);border-radius:var(--r-pill);
background:var(--surface-2);color:var(--accent);font-size:.78rem;font-weight:700;
letter-spacing:.04em;text-transform:uppercase;margin-bottom:1rem;
}
.hero .kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.hero-h1{font-size:clamp(2.4rem,5.6vw,4.1rem);font-weight:800;line-height:1.04;letter-spacing:-.045em;margin:0 0 1rem}
.hero-h1 em{font-style:italic;color:var(--accent)}
.hero p{color:var(--muted);font-size:clamp(1rem,1.5vw,1.12rem);max-width:48ch;margin:0 0 1.5rem;line-height:1.6}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}
.hero-kontak{display:flex;flex-wrap:wrap;gap:.55rem;color:var(--muted);font-size:.9rem}
.hero-kontak-item{display:flex;align-items:center;gap:.45rem}
.hero-kontak-item .icon{color:var(--accent);font-size:1.05rem}
/* ---------- 19.5 Katalog bento grid ---------- */
#katalog .wrap{padding-top:0}
.grid{display:grid;gap:16px}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1440px){.grid{max-width:1100px;margin-inline:auto;grid-template-columns:repeat(4,1fr);gap:20px}}
#grid{display:grid}
.app{
display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;
padding:1rem 1rem 1.1rem;background:var(--surface);
border:1px solid var(--line);border-radius:var(--r-card);
box-shadow:var(--shadow-1),var(--bezel-inner);
cursor:pointer;text-align:left;width:100%;position:relative;overflow:hidden;
transition:background .24s var(--ease-spring),border-color .24s var(--ease-spring),
transform .22s var(--ease-press),box-shadow .24s var(--ease-spring);
will-change:transform;
}
.app::before{
content:"";position:absolute;inset:0 0 auto 0;height:10px;background:var(--accent);
opacity:0;transition:opacity .24s var(--ease-spring);
}
.app .thumb,.app .logo,.app .logo-g{
width:44px;height:44px;border-radius:12px;flex:none;
box-shadow:var(--shadow-1);background:var(--surface-2);
}
.app .nm{font-size:.85rem;font-weight:700;line-height:1.25;color:var(--text-strong);margin-bottom:.1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.app .hg{display:flex;align-items:baseline;gap:.35rem;font-size:.78rem;color:var(--muted);margin-top:.1rem}
.app .hg .now{color:var(--text);font-weight:700;font-size:.88rem}
.app .hg .coret{font-size:.78em;opacity:.6;text-decoration:line-through}
.app .stk{
font-size:.64rem;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);
background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
margin-top:.35rem;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap
}
.app .stk.habis{background:color-mix(in srgb,var(--destructive) 12%,transparent);color:var(--destructive);border-color:color-mix(in srgb,var(--destructive) 35%,transparent)}
@media (hover:hover){
.app:hover{
background:var(--surface-2);
border-color:color-mix(in srgb,var(--accent) 45%,transparent);
transform:translateY(-4px);
box-shadow:var(--shadow-3),var(--bezel-inner);
}
.app:hover::before{opacity:1}
.app:hover .thumb,.app:hover .logo,.app:hover .logo-g{transform:translateY(-2px) scale(1.04);transition:transform .24s var(--ease-spring)}
}
.app:active{transform:scale(.97);transition:transform .1s var(--ease-press)}
.app .stk{order:2;margin-top:.5rem}
.chip{
display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .85rem;
border:1px solid var(--line-strong);border-radius:var(--r-pill);
background:transparent;color:var(--text);font-size:.82rem;cursor:pointer;
transition:border-color .2s var(--ease-spring),background .2s var(--ease-spring),color .2s var(--ease-spring);
}
.chip:hover{border-color:var(--text)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.search input{
width:100%;padding:.8rem 1rem .8rem 2.9rem;border-radius:12px;
border:1px solid var(--line-strong);background:var(--surface);color:var(--text);
font-size:.92rem;
}
/* ---------- 19.6 Langkah (cara pesan) ---------- */
.flow{
display:grid;gap:1.25rem;counter-reset:step;max-width:980px;margin-inline:auto
}
.flow li{
display:grid;grid-template-columns:auto 1fr;gap:1rem 1.5rem;
padding:1.4rem 1.5rem;background:var(--surface);
border:1px solid var(--line);border-radius:var(--r-card);
box-shadow:var(--shadow-1),var(--bezel-inner);
transition:transform .2s var(--ease-spring),border-color .2s var(--ease-spring);
}
.flow li:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.flow li::before{
content:counter(step);counter-increment:step;
display:grid;place-items:center;width:34px;height:34px;background:var(--accent);
color:var(--accent-ink);font-family:'JetBrains Mono',monospace;font-weight:800;
font-size:1.15rem;border-radius:50%;grid-column:1;grid-row:1;align-self:start;
}
.flow h3{font-size:1.05rem;font-weight:800;margin:0 0 .3rem;color:var(--text-strong)}
.flow p{color:var(--muted);font-size:.93rem;line-height:1.55;margin:0}
@media (min-width:900px){.flow{grid-template-columns:repeat(3,1fr)}}
/* ---------- 19.7 FAQ ---------- */
#faq .wrap,#view-jasa .faq-2kolom{max-width:900px;margin-inline:auto}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);background:var(--surface);border-radius:var(--r-card);margin:0 0 .6rem;overflow:hidden}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 1.4rem;cursor:pointer;font-weight:700;list-style:none;font-size:1.02rem;color:var(--text-strong)}
.faq summary .icon{color:var(--muted);transition:transform .35s var(--ease-spring);font-size:1.1rem}
.faq details[open] summary .icon{transform:rotate(180deg)}
.faq p{color:var(--muted);padding:0 1.4rem 1.3rem;max-width:70ch;font-size:.94rem;line-height:1.65}
/* ---------- 19.8 Testimoni ---------- */
.sec-eyebrow-badge{display:flex;align-items:center;gap:.5rem;color:var(--accent);font-weight:800;font-size:.9rem;letter-spacing:.02em;margin-bottom:.5rem}
.gold-star-pulse{font-size:1.35rem;animation:starPulse 2.5s ease-in-out infinite}
@keyframes starPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:1}}
.rating-summary-card{
display:flex;gap:1.5rem;align-items:center;background:var(--surface);
border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--shadow-2),var(--bezel-inner);padding:1.6rem 1.8rem;
}
.score-number-row{display:flex;align-items:baseline;gap:.2rem}
.score-big{font-size:3.2rem;font-weight:900;color:var(--text-strong)}
.score-max{font-size:1.5rem;color:var(--muted);font-weight:600}
.score-stars-row{display:flex;gap:.18rem;color:#EAB308;font-size:1.3rem;line-height:1}
.score-label{color:var(--muted);font-size:.88rem;margin-top:.1rem}
.rating-trust-badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.trust-badge-item{
display:flex;gap:.8rem;align-items:flex-start;padding:1rem;border:1px solid var(--line);
border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-1),var(--bezel-inner)
}
.trust-badge-icon{
width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
background:var(--surface-2);color:var(--accent);border:1px solid var(--line-strong);flex:none
}
.trust-badge-icon .icon-mini{width:17px;height:17px}
.trust-badge-text{display:flex;flex-direction:column}
.trust-badge-text strong{font-size:.88rem;color:var(--text-strong);font-weight:800}
.trust-badge-text small{font-size:.76rem;color:var(--muted);line-height:1.4}
.ulasan{display:grid;gap:14px}
@media (min-width:900px){.ulasan{grid-template-columns:repeat(2,1fr)}}
.ulasan-action-wrap{margin-top:2rem;text-align:center}
/* ---------- 19.9 CTA + footer ---------- */
footer{
margin-top:clamp(4rem,8vw,6rem);border-top:1px solid var(--line);
padding:3rem 0 calc(96px + env(safe-area-inset-bottom, 0px));
}
footer .icon{font-size:1rem}
/* ---------- 19.10 Tombol ---------- */
.btn{border-radius:var(--r-pill);min-height:46px;transition:transform .2s var(--ease-press),box-shadow .2s var(--ease-spring),background .2s var(--ease-spring),border-color .2s var(--ease-spring)}
.btn:active{transform:scale(.965);transition:transform .1s var(--ease-press)}
.btn-primary{
background:var(--accent);color:var(--accent-ink);
box-shadow:0 6px 16px -8px oklch(56% .19 262/.45);
}
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 88%,var(--text));box-shadow:0 8px 20px -10px oklch(56% .19 262/.55)}
.btn-ghost{
background:transparent;color:var(--text);border:1px solid var(--line-strong);
}
.btn-ghost:hover{border-color:var(--text);background:var(--surface-2)}
.btn-primary .icon,.btn-ghost .icon{font-size:1rem}
.btn-ghost{margin-left:0}
/* ---------- 19.11 Variant sheet ---------- */
.sheet{
border-radius:var(--r-lg) var(--r-lg) 0 0;
box-shadow:0 -20px 60px -20px oklch(0% 0 0/.45);
}
.sheet-head .logo,.sheet-head .logo-g{width:44px;height:44px;border-radius:12px}
/* ---------- 19.12 pita-band (marquee) ---------- */
.pita{opacity:.55}
/* ---------- 19.13 A11y & motion ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
.app::before,.flow li::before,.app:hover::before{transition:none}
.app:hover{transform:none;transition:none}
.gold-star-pulse{animation:none}
}
[hidden]{display:none !important}
.hidden{display:none !important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap}
/* =========================================================================
20. SIDEBAR DRAWER NAVIGASI & AKUN (Stitch v4 OpenDesign)
========================================================================= */
/* Tombol buka sidebar di navbar */
.sidebar-btn{
width:42px !important;height:42px !important;
border-radius:50% !important;
display:inline-flex !important;align-items:center;justify-content:center;
background:transparent;color:var(--text);border:1px solid var(--line);
cursor:pointer;flex-shrink:0;transition:all .2s ease;
}
.sidebar-btn:hover{background:var(--surface-2);border-color:var(--text)}
.sidebar-btn:active{transform:scale(.94)}
/* Sembunyikan akun-wrap lama di layar < 900px karena sudah ada di sidebar */
@media (max-width:899px){
.nav-akun-wrap{display:none !important}
.sidebar-btn{display:inline-flex !important}
}
@media (min-width:900px){
.sidebar-btn{display:inline-flex !important}
}
/* Hindari horizontal blowout navbar di ponsel < 480px */
@media (max-width:480px){
.nav{margin:0 8px;padding:6px 10px;top:8px}
.nav-in{column-gap:.45rem;padding-inline:0}
.brand-name{display:none !important}
.brand-mark img{width:36px;height:36px}
.seg{padding:2px}
.seg button{padding:.36rem .65rem;font-size:.78rem;min-height:34px}
.nav-act{gap:.35rem}
.nav-act .iconbtn{width:38px !important;height:38px !important}
.sidebar-btn{width:38px !important;height:38px !important}
}
/* Scrim & Container Sidebar */
.sidebar-scrim{
position:fixed;inset:0;background:rgba(8,10,14,.55);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
opacity:0;visibility:hidden;z-index:1001;
transition:opacity .32s var(--ease), visibility .32s;
}
.sidebar-scrim.on{opacity:1;visibility:visible}
.sidebar-drawer{
position:fixed;top:0;left:0;height:100%;
width:min(350px,88vw);
background:var(--surface);
border-right:1px solid var(--line);
z-index:1002;
display:flex;flex-direction:column;
transform:translateX(-100%);-webkit-transform:translateX(-100%);
pointer-events:none;visibility:hidden;
transition:transform .32s cubic-bezier(.16,1,.3,1), visibility 0s .32s, box-shadow .32s ease;
box-shadow:none;
}
.sidebar-drawer.on{
transform:translateX(0);-webkit-transform:translateX(0);
pointer-events:auto;visibility:visible;
box-shadow:24px 0 60px -20px rgba(8,10,14,.65);
transition:transform .32s cubic-bezier(.16,1,.3,1), visibility 0s 0s, box-shadow .32s ease;
}
/* Kepala Sidebar */
.sb-head{
display:flex;align-items:center;justify-content:space-between;
padding:.9rem 1.15rem;border-bottom:1px solid var(--line);
background:color-mix(in srgb,var(--surface) 90%,transparent);
}
.sb-brand{display:flex;align-items:center;gap:.65rem}
.sb-logo{border-radius:10px;box-shadow:var(--shadow-1)}
.sb-title-row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.sb-title{display:block;font-size:1.02rem;font-weight:800;letter-spacing:-.025em;color:var(--text);line-height:1.2}
.sb-dev-pill{
display:inline-flex;align-items:center;gap:4px;
padding:2px 7px;border-radius:999px;
background:rgba(245,158,11,.14);color:#d97706;
border:1px solid rgba(245,158,11,.3);
font-size:.64rem;font-weight:750;letter-spacing:.02em;line-height:1.2;
white-space:nowrap;
}
:root[data-theme="dark"] .sb-dev-pill{
background:rgba(245,158,11,.18);color:#fbbf24;
border-color:rgba(245,158,11,.35);
}
.sb-dev-dot{
width:5px;height:5px;border-radius:50%;
background:#f59e0b;box-shadow:0 0 0 2px rgba(245,158,11,.3);
animation:sbPulse 2s infinite ease-in-out;
}
@keyframes sbPulse{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:.45;transform:scale(.85)}
}
.sb-sub{display:block;font-size:.74rem;color:var(--muted);font-weight:500;margin-top:1px}
.sb-close{
width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer;
transition:all .2s ease;
}
.sb-close:hover{background:var(--surface-2);border-color:var(--text)}
/* Badan Sidebar */
.sb-body{
flex:1;overflow-y:auto;padding:1rem 1.15rem;
display:flex;flex-direction:column;gap:1.25rem;
}
/* Kartu Akun Pengguna */
.sb-akun-box{
background:var(--surface-2);
border:1px solid var(--line);
border-radius:18px;
padding:1rem;
display:flex;flex-direction:column;gap:.75rem;
box-shadow:0 4px 14px -6px rgba(0,0,0,.08);
}
:root[data-theme="dark"] .sb-akun-box{
background:rgba(255,255,255,.05);
border-color:rgba(255,255,255,.12);
box-shadow:0 6px 20px -8px rgba(0,0,0,.4);
}
.sb-akun-header{display:flex;align-items:center;gap:.75rem}
.sb-ava{
width:44px;height:44px;border-radius:50%;flex-shrink:0;
background:var(--surface);border:1px solid var(--line);
display:grid;place-items:center;overflow:hidden;color:var(--muted);
}
.sb-ava-img{width:100%;height:100%;object-fit:cover}
.sb-akun-info{flex:1;min-width:0}
.sb-akun-nama{font-size:.92rem;font-weight:750;color:var(--text);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-akun-email{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.sb-akun-badge{
display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;
font-size:.68rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
}
.badge-guest{background:rgba(148,163,184,.15);color:var(--muted);border:1px solid var(--line)}
.badge-user{background:rgba(59,130,246,.15);color:#3b82f6;border:1px solid rgba(59,130,246,.3)}
.badge-admin{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.3)}
/* Tombol Aksi Akun di Sidebar */
.sb-btn-google{
width:100%;min-height:42px;display:flex;align-items:center;justify-content:center;gap:.6rem;
border-radius:12px;background:#ffffff;color:#1e293b;font-size:.85rem;font-weight:700;
border:1px solid rgba(0,0,0,.14);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.06);
transition:all .2s ease;
}
.sb-btn-google:hover{background:#f8fafc;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.sb-btn-google:active{transform:scale(.97)}
.sb-google-ico{width:18px;height:18px;flex-shrink:0}
.sb-item-sub{
display:flex;align-items:center;gap:.65rem;padding:.55rem .75rem;
border-radius:10px;text-decoration:none;color:var(--text);font-size:.82rem;font-weight:650;
transition:background .2s ease,transform .2s ease;
}
.sb-item-sub:hover{background:var(--surface);transform:translateX(2px)}
.sb-item-sub .icon{font-size:1.05rem;color:var(--muted)}
.sb-item-sub.sb-admin{color:#ef4444}
.sb-item-sub.sb-admin .icon{color:#ef4444}
.sb-item-sub.sb-keluar{
width:100%;border:0;background:transparent;cursor:pointer;
color:#ef4444;padding:.55rem .75rem;text-align:left;
}
.sb-item-sub.sb-keluar:hover{background:rgba(239,68,68,.1)}
/* Kelompok Menu Fitur & Layanan */
.sb-group{display:flex;flex-direction:column;gap:.45rem}
.sb-group-title{
font-size:.72rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted);padding-inline:.35rem;margin-bottom:2px;
}
.sb-nav{display:flex;flex-direction:column;gap:3px}
.sb-item{
display:flex;align-items:center;gap:.75rem;padding:.65rem .75rem;
border-radius:14px;text-decoration:none;color:var(--text);
background:transparent;border:0;width:100%;text-align:left;cursor:pointer;
transition:all .22s ease;
}
.sb-item:hover{background:var(--surface-2);transform:translateX(3px)}
.sb-item:active{transform:scale(.98)}
.sb-item-ic{
width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
flex-shrink:0;font-size:1.15rem;transition:all .2s ease;
}
.sb-item-ic.apps{background:rgba(59,130,246,.12);color:#3b82f6}
.sb-item-ic.jasa{background:rgba(168,85,247,.12);color:#a855f7}
.sb-item-ic.porto{background:rgba(16,185,129,.12);color:#10b981}
.sb-item-ic.cara{background:rgba(245,158,11,.12);color:#f59e0b}
.sb-item-ic.garansi{background:rgba(6,182,212,.12);color:#06b6d4}
.sb-item-ic.ulasan{background:rgba(236,72,153,.12);color:#ec4899}
.sb-item-ic.faq{background:rgba(99,102,241,.12);color:#6366f1}
.sb-item-text{flex:1;min-width:0}
.sb-item-text b{display:block;font-size:.87rem;font-weight:700;color:var(--text);line-height:1.2}
.sb-item-text small{display:block;font-size:.73rem;color:var(--muted);margin-top:2px}
.sb-pill-chip{
font-size:.66rem;font-weight:750;padding:2px 7px;border-radius:999px;
background:rgba(59,130,246,.14);color:#3b82f6;letter-spacing:.02em;white-space:nowrap;
}
/* Kanal Sosial di Sidebar */
.sb-social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}
.sb-soc-btn{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
padding:.65rem .4rem;border-radius:12px;border:1px solid var(--line);
background:var(--surface-2);color:var(--text);text-decoration:none;
font-size:.72rem;font-weight:650;transition:all .2s ease;text-align:center;
}
.sb-soc-btn .icon{font-size:1.25rem}
.sb-soc-btn.wa:hover{background:#128c7e;color:#fff;border-color:transparent}
.sb-soc-btn.tg:hover{background:#229ed9;color:#fff;border-color:transparent}
.sb-soc-btn.tt:hover{background:#000000;color:#fff;border-color:transparent}
/* Footer Sidebar & Tema */
.sb-foot{
padding:.9rem 1.15rem calc(1rem + env(safe-area-inset-bottom, 0px));
border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 92%,transparent);
display:flex;flex-direction:column;gap:.65rem;
}
.sb-foot-theme{display:flex;align-items:center;justify-content:space-between}
.sb-foot-label{font-size:.8rem;font-weight:650;color:var(--muted)}
.sb-theme-toggle{
display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .85rem;
border-radius:999px;border:1px solid var(--line-strong);background:var(--surface-2);
color:var(--text);font-size:.78rem;font-weight:700;cursor:pointer;
transition:all .2s ease;
}
.sb-theme-toggle:hover{border-color:var(--accent);background:var(--accent-soft)}
.sb-theme-toggle .icon{font-size:.95rem}
.sb-foot-copy{display:flex;align-items:center;gap:.45rem;font-size:.72rem;color:var(--muted)}
.sb-status-dot{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.25)}
/* =========================================================================
21. PENINGKATAN KONTRAS & ERGONOMI KERANJANG BELANJA (MODE TERANG & GELAP)
========================================================================= */
/* Tombol Keranjang di Navbar */
.nav-act .cart-btn{
position:relative;
display:inline-flex !important;align-items:center;justify-content:center;
}
.cart-count{
position:absolute;top:-4px;right:-4px;
min-width:20px;height:20px;padding:0 5px;
border-radius:999px;background:#ef4444 !important;color:#ffffff !important;
font-size:.7rem;font-weight:800;display:none;place-items:center;line-height:1;
box-shadow:0 2px 8px rgba(239,68,68,.5);border:2px solid var(--surface);
}
.cart-count.on{display:grid}
/* Kartu Item di Laci Keranjang */
.drawer{
background:var(--surface) !important;
border-left:1px solid var(--line);
}
:root[data-theme="dark"] .drawer{
background:oklch(17% .012 260) !important;
border-left-color:rgba(255,255,255,.14);
}
.drawer-head{
background:color-mix(in srgb,var(--surface) 94%,transparent) !important;
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid var(--line);
}
.drawer-head h2{
font-size:1.15rem !important;font-weight:800 !important;
letter-spacing:-.02em;color:var(--text) !important;
}
.drawer .line{
background:var(--surface-2) !important;
border:1px solid var(--line) !important;
border-radius:14px !important;
padding:.85rem .95rem !important;
margin-bottom:.65rem;
gap:.5rem;
}
:root[data-theme="dark"] .drawer .line{
background:rgba(255,255,255,.05) !important;
border-color:rgba(255,255,255,.12) !important;
}
.drawer .line-info b{
font-size:.95rem !important;font-weight:750 !important;
color:var(--text) !important;
}
.drawer .line-info span{
font-size:.82rem !important;color:var(--muted) !important;
margin-top:3px;
}
.drawer .cart-item-desc{
font-size:.76rem !important;line-height:1.42;
color:var(--muted) !important;
}
:root[data-theme="dark"] .drawer .cart-item-desc{
color:oklch(76% .012 260) !important;
}
/* Stepper Kuantitas */
.drawer .qty{
background:var(--surface) !important;
border:1px solid var(--line-strong) !important;
border-radius:999px;padding:3px;
}
:root[data-theme="dark"] .drawer .qty{
background:rgba(255,255,255,.08) !important;
border-color:rgba(255,255,255,.2) !important;
}
.drawer .qty button{
color:var(--text);transition:background .2s ease;
}
.drawer .qty button:hover{background:var(--surface-2)}
.drawer .qty span{color:var(--text);font-weight:700}
/* Input Form di Keranjang */
.antar{
background:transparent !important;
}
.isian input{
background:var(--surface) !important;
color:var(--text) !important;
border:1px solid var(--line-strong) !important;
border-radius:10px !important;
height:42px !important;
font-size:.88rem !important;
}
:root[data-theme="dark"] .isian input{
background:rgba(255,255,255,.07) !important;
border-color:rgba(255,255,255,.18) !important;
color:#ffffff !important;
}
:root[data-theme="dark"] .isian input::placeholder{
color:rgba(255,255,255,.45) !important;
}
.isian input:focus{
border-color:#3b82f6 !important;
box-shadow:0 0 0 3px rgba(59,130,246,.25) !important;
}
/* Tombol Utama Pembayaran (Kontras Tinggi Pasti Terbaca) */
#ke-klaim, .drawer-foot .btn-primary{
background:linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
color:#ffffff !important;
font-weight:750 !important;
font-size:.95rem !important;
border:0 !important;
min-height:46px !important;
border-radius:12px !important;
box-shadow:0 8px 20px -6px rgba(37,99,235,.45) !important;
text-shadow:0 1px 2px rgba(0,0,0,.25) !important;
}
#ke-klaim:hover, .drawer-foot .btn-primary:hover{
background:linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
box-shadow:0 10px 24px -6px rgba(37,99,235,.55) !important;
}
:root[data-theme="dark"] #ke-klaim,
:root[data-theme="dark"] .drawer-foot .btn-primary{
background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
color:#ffffff !important;
box-shadow:0 8px 24px -6px rgba(59,130,246,.5) !important;
text-shadow:0 1px 2px rgba(0,0,0,.35) !important;
}
:root[data-theme="dark"] #ke-klaim:hover,
:root[data-theme="dark"] .drawer-foot .btn-primary:hover{
background:linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
}
#ke-klaim:disabled, .drawer-foot .btn-primary:disabled{
background:color-mix(in srgb, var(--surface-2) 75%, var(--line-strong)) !important;
color:var(--muted) !important;
opacity:1 !important;
box-shadow:none !important;
cursor:not-allowed !important;
border:1px solid var(--line) !important;
text-shadow:none !important;
}
:root[data-theme="dark"] #ke-klaim:disabled,
:root[data-theme="dark"] .drawer-foot .btn-primary:disabled{
background:rgba(255,255,255,.08) !important;
color:rgba(255,255,255,.45) !important;
border-color:rgba(255,255,255,.12) !important;
}
/* Tombol Sekunder WhatsApp */
#checkout, #buka-wa-klaim{
border:1px solid var(--line-strong) !important;
background:var(--surface-2) !important;
color:var(--text) !important;
font-weight:700 !important;
min-height:44px !important;
border-radius:12px !important;
}
:root[data-theme="dark"] #checkout,
:root[data-theme="dark"] #buka-wa-klaim{
background:rgba(255,255,255,.07) !important;
border-color:rgba(255,255,255,.18) !important;
color:#ffffff !important;
}
/* Total Price Bar */
.drawer-foot .total{
padding:.4rem 0 .2rem;
}
.drawer-foot .total span{
font-size:.88rem;color:var(--muted);font-weight:600;
}
.drawer-foot .total b{
font-size:1.35rem !important;font-weight:800 !important;
color:var(--text) !important;letter-spacing:-.02em;
}
/* =========================================================================
LAPIS STUDIO (redesign) — penajaman mutu tanpa merombak struktur.
Prinsip: yang lama sudah benar soal hierarki dan disiplin monokrom,
jadi lapis ini TIDAK menambah jenis huruf kedua dan TIDAK memasang
gradien hiasan. Yang dinaikkan mutunya:
1. Palet: latar netral-hangat, tinta lebih dalam, aksen kobalt yang
turun saturasinya supaya tidak menyala seperti iklan.
2. Nav mengambang: teks halaman tidak lagi menembus pil (keluhan
"judul terpotong"), scrim dipertegas + offset jangkar dinaikkan.
3. Judul: skala display lebih tegas, jangkar mobile ditekan supaya
tidak tumpah; angka tetap lebar tetap.
4. Tombol pembayaran: gradien + text-shadow dilepas, jadi permukaan
pekat bertoken — kontras tetap pasti terbaca.
5. Portofolio: penanda gradien diganti permukaan rata bergaris rambut.
Ditulis paling akhir supaya menang urutan, sesuai aturan berkas ini.
========================================================================= */
/* ---------- 1. token diperhalus ---------- */
@supports (color: oklch(50% .1 260)){
:root{
--bg:oklch(98.7% .0035 95);
--surface:oklch(100% 0 0);
--surface-2:oklch(96.7% .005 95);
--text:oklch(19% .018 264);
--muted:oklch(51% .014 264);
--line:oklch(19% .018 264 / .10);
--line-strong:oklch(19% .018 264 / .19);
--accent:oklch(50% .194 264);
--accent-ink:oklch(100% 0 0);
--accent-soft:oklch(50% .194 264 / .085);
--tinta:oklch(19% .018 264);
--tinta-atas:oklch(100% 0 0);
--shadow:
0 1px 2px oklch(19% .018 264 / .04),
0 12px 28px -16px oklch(19% .018 264 / .16),
0 34px 72px -42px oklch(19% .018 264 / .24);
--r-card:18px; --r-tile:13px; --r-input:12px;
}
:root[data-theme="dark"]{
--bg:oklch(14.5% .012 264);
--surface:oklch(18.5% .014 264);
--surface-2:oklch(23% .016 264);
--text:oklch(97.5% .004 264);
--muted:oklch(70% .014 264);
--line:oklch(100% 0 0 / .10);
--line-strong:oklch(100% 0 0 / .20);
--accent:oklch(72% .15 264);
--accent-ink:oklch(16% .03 264);
--accent-soft:oklch(72% .15 264 / .14);
--tinta:oklch(97.5% .004 264);
--tinta-atas:oklch(14.5% .012 264);
--shadow:
0 1px 2px oklch(0% 0 0 / .5),
0 14px 30px -18px oklch(0% 0 0 / .72),
0 44px 88px -48px oklch(0% 0 0 / .9);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--bg:oklch(14.5% .012 264);
--surface:oklch(18.5% .014 264);
--surface-2:oklch(23% .016 264);
--text:oklch(97.5% .004 264);
--muted:oklch(70% .014 264);
--line:oklch(100% 0 0 / .10);
--line-strong:oklch(100% 0 0 / .20);
--accent:oklch(72% .15 264);
--accent-ink:oklch(16% .03 264);
--accent-soft:oklch(72% .15 264 / .14);
--tinta:oklch(97.5% .004 264);
--tinta-atas:oklch(14.5% .012 264);
--shadow:
0 1px 2px oklch(0% 0 0 / .5),
0 14px 30px -18px oklch(0% 0 0 / .72),
0 44px 88px -48px oklch(0% 0 0 / .9);
}
}
}
/* ---------- 2. nav mengambang: legibilitas saat digulung ---------- */
/* Scrim lama berhenti di 64% lalu memudar — cukup untuk mendiamkan
halaman, tapi pilnya sendiri masih terlalu bening sehingga judul
bagian tembus dan terlihat "terpotong". Di sini scrim dibuat lebih
pekat lebih lama, dan pilnya dikasih lantai solid tipis. */
.nav::before{
background:linear-gradient(to bottom,var(--bg) 0,var(--bg) 72%,color-mix(in srgb,var(--bg) 86%,transparent) 90%,transparent 100%);
}
.nav-in{
background:color-mix(in srgb,var(--surface) 88%,transparent);
box-shadow:0 1px 0 color-mix(in srgb,#FFFFFF 60%,transparent) inset, 0 10px 30px -18px oklch(19% .018 264 / .28);
}
:root[data-theme="dark"] .nav-in{
background:color-mix(in srgb,var(--surface) 90%,transparent);
box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 10px 30px -18px oklch(0% 0 0 / .8);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .nav-in{
background:color-mix(in srgb,var(--surface) 90%,transparent);
box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 10px 30px -18px oklch(0% 0 0 / .8);
}
}
/* Jangkar diberi ruang lebih dari tinggi nav supaya judul bagian tidak
pernah berhenti persis di bawah pil. */
section[id]{scroll-margin-top:124px}
/* ---------- 3. huruf: skala display lebih tegas, aman di mobile ---------- */
.hero h1, .hero .hero-h1{
font-size:clamp(2rem,3.4vw,3rem);
letter-spacing:-.042em;
line-height:1.06;
max-width:20ch;
overflow-wrap:break-word;
}
.hero h1 em, .hero .hero-h1 em{
text-decoration-thickness:.045em;
text-underline-offset:.12em;
}
.sec-head h2{
font-size:clamp(1.9rem,4.4vw,3.4rem);
letter-spacing:-.045em;
line-height:1.02;
}
.sec-head h2, .hero h1, .hero .hero-h1{text-wrap:balance}
@media (max-width:480px){
.hero h1, .hero .hero-h1{font-size:1.85rem;max-width:none;letter-spacing:-.035em}
.sec-head h2{font-size:1.75rem}
}
/* Label kecil di atas judul: dari pil beraksen menjadi label editorial
bergaris rambut — lebih tenang, tidak bersaing dengan tombol utama. */
.eyebrow{
background:none;border:0;border-radius:0;padding:0;color:var(--muted);
display:inline-flex;align-items:center;gap:.6rem;
font-size:.68rem;font-weight:700;letter-spacing:.22em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);flex:none}
/* ---------- 4. permukaan: tombol ---------- */
/* Hover kartu katalog sengaja TIDAK disentuh: lapis premium di atas sudah
memasang ring aksen + sorot dalam yang lebih halus daripada tambalan. */
.btn-primary{
box-shadow:0 10px 24px -14px color-mix(in srgb,var(--accent) 72%,transparent);
}
.btn-primary:hover{
background:color-mix(in srgb,var(--accent) 90%,var(--text));
box-shadow:0 14px 30px -14px color-mix(in srgb,var(--accent) 80%,transparent);
}
/* Tombol pembayaran: gradien + text-shadow dilepas. Permukaan pekat
bertoken, kontras putih di atas biru tetap pasti terbaca. */
#ke-klaim, .drawer-foot .btn-primary{
background:var(--accent) !important;
color:var(--accent-ink) !important;
text-shadow:none !important;
box-shadow:0 10px 26px -14px color-mix(in srgb,var(--accent) 80%,transparent) !important;
}
#ke-klaim:hover, .drawer-foot .btn-primary:hover{
background:color-mix(in srgb,var(--accent) 90%,var(--text)) !important;
box-shadow:0 14px 30px -14px color-mix(in srgb,var(--accent) 88%,transparent) !important;
}
:root[data-theme="dark"] #ke-klaim,
:root[data-theme="dark"] .drawer-foot .btn-primary{
background:var(--accent) !important;
color:var(--accent-ink) !important;
}
/* Portofolio: penanda gradien diganti permukaan rata + anyaman garis
rambut tipis, jadi terbaca sebagai pola teknis, bukan hiasan. */
.portfolio-mono{
background-color:var(--surface-2);
background-image:
linear-gradient(var(--line) 1px,transparent 1px),
linear-gradient(90deg,var(--line) 1px,transparent 1px);
background-size:26px 26px;
}
.portfolio-mono span{opacity:.16;letter-spacing:-.04em}
.portfolio-mono .portfolio-mono-icon{opacity:.5}
.portfolio-card{border-radius:var(--r-card)}
@media (hover:hover){
.portfolio-card:hover{
transform:translateY(-3px);
border-color:var(--line-strong);
box-shadow:var(--shadow);
}
}
/* ---------- 5. ritme & tepi ---------- */
.wrap{max-width:1180px}
.sec{padding:clamp(3.75rem,8vw,6.5rem) 0}
.hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.25rem,4.5vw,3.5rem)}
.grid{gap:16px}
@media (min-width:1024px){ .grid{gap:18px} }
/* Footer: satu garis rambut di atas, tautan yang jelas bisa diklik. */
.foot{row-gap:2rem}
.foot nav a{padding-block:2px}
@media (hover:hover){ .foot nav a:hover{color:var(--accent)} }
/* ---------- 6. sentuh & tanpa-tumpah di semua device ---------- */
@media (max-width:1023px){
.chips{scroll-snap-type:x proximity}
.chip{scroll-snap-align:start}
}
@media (max-width:480px){
.wrap{padding-inline:16px}
.hero-cta .btn{width:100%}
.tools .search{width:100%}
}
/* Ultrawide: konten tetap terpusat, tidak melebar tanpa batas. */
@media (min-width:1600px){ .wrap{max-width:1240px} }
@media (prefers-reduced-motion:reduce){
.portfolio-card:hover{transform:none}
}
/* ---------- 7. label kecil & pil status ---------- */
/* Kicker hero sebelumnya pil bergaris penuh; di lebar 390px ia melebar
hampir sepanjang layar sehingga terbaca seperti tombol. Diubah jadi
label editorial: huruf besar berspasi, titik aksen tetap sebagai
penanda "hidup", tanpa kotak. */
.hero .kicker{
border:0;background:none;border-radius:0;padding:0;
color:var(--muted);font-size:.7rem;font-weight:700;
letter-spacing:.2em;gap:.6rem;margin-bottom:.9rem;
}
.hero .kicker .dot{width:6px;height:6px;box-shadow:0 0 0 4px var(--accent-soft)}
/* Pil jam operasional: teks status rata kiri dengan ruang tumbuh, lalu
tautan dipisah garis rambut dan dikunci satu baris — jadi tidak lagi
berdesakan atau terlihat terpotong. */
.badge-jam-operasional{
background:var(--surface);border:1px solid var(--line);
box-shadow:none;gap:.6rem;padding:.45rem .8rem;
font-size:.8rem;font-weight:600;color:var(--text);max-width:100%;
}
.badge-jam-operasional:hover{
transform:none;border-color:var(--line-strong);
box-shadow:0 8px 22px -16px oklch(19% .018 264 / .4);
}
.badge-jam-operasional .status-text{flex:1 1 auto;text-align:left;line-height:1.3}
.badge-jam-operasional .status-cta{
flex:none;white-space:nowrap;margin-left:auto;
padding-left:.7rem;border-left:1px solid var(--line);
font-size:.72rem;font-weight:700;color:var(--accent);opacity:1;
}
@media (max-width:480px){
.badge-jam-operasional{width:100%;font-size:.74rem}
}
/* "Istirahat" adalah jeda, bukan galat: ungu bawaan diganti ambar supaya
sebahasa dengan sisa palet dan tetap terbaca di mode terang maupun gelap. */
.dot-rest .status-dot, .status-dot.dot-rest{
background-color:#F59E0B;
box-shadow:0 0 0 0 rgba(245,158,11,.7);
animation:pulseAmber 2.5s infinite cubic-bezier(.4,0,.6,1);
}
@media (max-width:480px){
.badge-jam-operasional{padding:.42rem .7rem}
.badge-jam-operasional .status-text{font-size:.75rem}
.badge-jam-operasional .status-cta{font-size:.69rem;padding-left:.6rem}
}
/* ---------- 8. tombol kanal resmi ---------- */
/* Sebelumnya bundaran tinta pekat 56px. Saat halaman digulung, bundaran
itu duduk tepat di atas judul bagian dan terbaca seperti noda. Sekarang
ia permukaan bersih bergaris rambut: tetap terlihat sebagai aksi, tapi
tidak lagi berteriak di atas teks. Saat dibuka, barulah memakai aksen. */
.bulat{
background:var(--surface);
color:var(--text);
border:1px solid var(--line-strong);
box-shadow:0 10px 26px -14px oklch(19% .018 264 / .34);
}
@media (hover:hover){
.bulat:hover{box-shadow:0 16px 34px -16px oklch(19% .018 264 / .44);border-color:var(--accent)}
}
.bulat[aria-expanded="true"]{
background:var(--accent);color:var(--accent-ink);border-color:transparent;
}
/* ---------- 9. scrim nav harus selebar layar ---------- */
/* Nav dibatasi lebar konten, jadi ::before-nya ikut menyempit dan
menyisakan pita tanpa scrim di kiri/kanan pada layar lebar. Scrim
direntangkan ke lebar viewport, bukan lebar kotak nav. */
.nav::before{
left:calc(50% - 50vw);
right:calc(50% - 50vw);
}
/* Batang progres gulir duduk di bawah pil nav dan terbaca seperti garis
nyasar. Dipindah ke tepi atas layar: penuh, tipis, dan jelas sebagai
indikator kemajuan baca. */
.nav::after{
top:-14px;bottom:auto;
left:calc(50% - 50vw);right:calc(50% - 50vw);
width:auto;
}
/* Label kartu hero dibatasi 12ch sehingga pecah tiga baris; 15ch
membuatnya dua baris seimbang. */
.hero-kaca-kicker{max-width:15ch;letter-spacing:.14em}
.cmd-k kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
/* ---------- 10. banner konsultan, aside jasa, dan footer ---------- */
/* Banner konsultan masih memakai gradien dua warna + ikon bergradien dari
gaya inline lama. Ditimpa jadi satu permukaan datar berambut: aksennya
cukup di ikon dan tombol, bukan di seluruh kotak. */
.jasa-konsultan-banner{
background:var(--surface)!important;
border:1px solid var(--line)!important;
border-radius:16px!important;
box-shadow:none!important;
}
.jasa-konsultan-banner > div:first-child > div:first-child{
background:var(--surface-2)!important;
border:1px solid var(--line);
color:var(--accent)!important;
box-shadow:none!important;
}
.jasa-konsultan-banner .btn{box-shadow:none}
/* Aside di hero jasa hanya berisi satu paragraf, jadi kotak kaca selebar
separuh grid terlihat kosong. Dibuat seperti kutipan editorial: garis
aksen di kiri, tanpa kotak. */
#view-jasa .hero-kaca{
background:transparent;
-webkit-backdrop-filter:none;backdrop-filter:none;
border:0;border-left:2px solid var(--accent);
border-radius:0;box-shadow:none;
padding:.2rem 0 .2rem 1.4rem;
}
#view-jasa .hero-kaca-top{margin-bottom:.85rem}
#view-jasa .hero-kaca-kicker{max-width:none;letter-spacing:.18em}
#view-jasa .hero-kaca-desk{
font-size:1.05rem;line-height:1.6;color:var(--text);max-width:34ch;
}
/* Footer: tautan dibaca menurun per kolom, bukan menyilang kiri-kanan. */
.foot nav{
display:grid;grid-auto-flow:column;
grid-template-rows:repeat(6,auto);
gap:.55rem 3rem;
}
/* Dua baris hukum bertumpuk jadi satu blok, bukan dua kotak bergaris. */
.copy + .copy{margin-top:.45rem;padding-top:0;border-top:0}
footer{
margin-top:clamp(2.5rem,4vw,3.5rem)!important;
padding:2.5rem 0 2rem!important;
border-color:var(--line);
}
@media (max-width:640px){
.foot nav{
grid-auto-flow:row;
grid-template-columns:repeat(2,minmax(0,1fr));
grid-template-rows:none;
gap:.5rem 1rem;
}
}
/* Huruf miring sintetis pada em display terlihat seperti huruf yang
terjatuh; aksen warna sudah cukup untuk menandai bagian itu. */
.hero h1 em, .hero .hero-h1 em{font-style:normal}
/* Titik "online" pada label banner ikut tercentang tengah saat teksnya
membungkus dua baris di layar sempit, sehingga tampak seperti butir di
ujung baris. Titiknya dinaikkan ke awal baris. */
.jasa-konsultan-banner > div:first-child > div:last-child > div:first-child{
display:flex!important;align-items:flex-start!important;gap:.45rem!important;
}
.jasa-konsultan-banner > div:first-child > div:last-child > div:first-child > span:first-child{
align-self:flex-start;margin-top:.42em;
}
/* Tracking negatif pada huruf display juga mengecilkan spasi antarkata,
sehingga "dan Bot" terbaca "danBot". Spasi kata dikembalikan sedikit. */
.hero h1, .hero .hero-h1, .sec-head h2{word-spacing:.07em}
/* Label banner jasa dipadatkan supaya muat satu baris di ponsel. */
@media (max-width:480px){
.jasa-konsultan-banner > div:first-child > div:last-child > div:first-child{
font-size:.64rem!important;letter-spacing:.03em!important;
}
/* Nama merek tetap tampil di footer walau di navbar disembunyikan, dan
teks hukumnya diberi ruang agar tidak tertutup tombol kontak. */
footer .brand-name{display:inline!important}
footer{padding-bottom:5.5rem!important}
}
/* ---------- 13. Tombol kontak kanal di ponsel: 48px supaya tidak
menelan kartu katalog 4 kolom (target sentuh tetap >=44px). */
@media (max-width:640px){
.bulat{
width:48px!important;height:48px!important;
left:14px!important;bottom:calc(14px + env(safe-area-inset-bottom))!important;
}
.bulat .icon{font-size:1.22rem!important}
}
/* ---------- 14. catatan-hukum: tint netral (hindari artefak hue
color-mix oklch yang jatuh ke pink), pita aksen tetap. */
.catatan-hukum{
background:var(--surface-2)!important;
border:1px solid var(--line)!important;
border-left:3px solid var(--accent)!important;
border-radius:var(--r-input)!important;
color:var(--muted)!important;
box-shadow:none!important;
}
/* ---------- 15. Baris chip kategori: fade tepi kanan supaya potongan
pill terbaca sebagai "masih bisa digeser", bukan terpotong. */
@media (max-width:900px){
.tools .chips,#katalog .chips{
-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),rgba(0,0,0,.15));
mask-image:linear-gradient(to right,#000 calc(100% - 26px),rgba(0,0,0,.15));
}
}
/* ---------- 16. Footer: ruang bawah untuk tombol kontak tetap (FAB)
di SEMUA lebar layar — sebelumnya hanya diberi ruang di ponsel. */
footer{padding-bottom:calc(2rem + 64px)!important}
/* ---------- 18. Portofolio: sampul tipografis, bukan gambar "kosong"
Monogram jadi fokus; ikon globe dilepas agar tidak terbaca
sebagai placeholder gambar yang gagal dimuat. */
.portfolio-mono{background-size:32px 32px}
.portfolio-mono span{
opacity:.9!important;
font-size:clamp(3.2rem,10vw,4.6rem)!important;
letter-spacing:-.06em!important;
line-height:1;
}
.portfolio-mono .portfolio-mono-icon{display:none!important}
@media (max-width:900px){
.portfolio-tabs{
-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),rgba(0,0,0,.15));
mask-image:linear-gradient(to right,#000 calc(100% - 26px),rgba(0,0,0,.15));
}
}
/* ============================================================
LAPIS STUDIO — SECTION 19
Pita logo: naikkan kehadiran visual (0.55 → 0.72) agar strip
tidak terbaca pucat/kosong, tetap recessif di bawah hero.
============================================================ */
.pita{opacity:.72}
@media (prefers-reduced-motion:no-preference){
.pita{transition:opacity .35s ease}
.pita:hover{opacity:.9}
}
/* ============================================================
LAPIS STUDIO — SECTION 20
Grid katalog ≥1440: hapus max-width 1100 + margin-inline:auto
warisan (membuat item menyusut fit-content 640px → 129px
ruang mati di kanan). 4 kolom tetap, kini mengisi kolom penuh.
============================================================ */
@media (min-width:1440px){
#katalog .grid{max-width:none;margin-inline:0;width:100%}
}
/* =========================================================================
21. PRD DARK AMBIENT GLOW 2026 — PRECISION COMMERCE
Latar Obsidian (#080A10), Ambient Glow Biru (#527DFF) & Ungu (#8757E8),
Surface 4-Layer (#11141D, #171B27, #272D3B), WCAG 2.2 AA Kontras (17.2:1),
dan Adaptabilitas Universal Multi-Device (Android POV, iPhone POV, Desktop).
========================================================================= */
/* --- 21.1 Token Dark-First (Linear & Resend Aesthetic) --- */
:root,
:root[data-theme="dark"],
:root:not([data-theme="light"]) {
--bg: #080A10;
--surface: #11141D;
--surface-2: #171B27;
--surface-hover: #171B27;
--border: #272D3B;
--line: #272D3B;
--line-strong: rgba(255, 255, 255, 0.16);
--ambient-blue: #527DFF;
--ambient-violet: #8757E8;
--text: #F4F6FC;
--text-strong: #FFFFFF;
--muted: #A6AEC0;
--accent: #527DFF;
--accent-link: #A6B9FF;
--accent-ink: #FFFFFF;
--accent-soft: rgba(82, 125, 255, 0.12);
--tinta: #F4F6FC;
--tinta-atas: #080A10;
--color-success: #34D399;
--color-warning: #FBBF24;
--color-error: #F87171;
--r-card: 16px;
--r-tile: 13px;
--r-input: 12px;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 36px -18px rgba(0, 0, 0, 0.75);
color-scheme: dark;
}
@supports (color: oklch(50% .1 260)) {
:root,
:root[data-theme="dark"],
:root:not([data-theme="light"]) {
--bg: #080A10;
--surface: #11141D;
--surface-2: #171B27;
--surface-hover: #171B27;
--border: #272D3B;
--line: #272D3B;
--line-strong: rgba(255, 255, 255, 0.16);
--ambient-blue: #527DFF;
--ambient-violet: #8757E8;
--text: #F4F6FC;
--text-strong: #FFFFFF;
--muted: #A6AEC0;
--accent: #527DFF;
--accent-link: #A6B9FF;
--accent-ink: #FFFFFF;
--accent-soft: rgba(82, 125, 255, 0.12);
--tinta: #F4F6FC;
--tinta-atas: #080A10;
--color-success: #34D399;
--color-warning: #FBBF24;
--color-error: #F87171;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 36px -18px rgba(0, 0, 0, 0.75);
color-scheme: dark;
}
}
/* Dukungan tema terang (hanya jika pengguna secara eksplisit mengaktifkannya) */
:root[data-theme="light"] {
--bg: oklch(98.7% .0035 95);
--surface: #FFFFFF;
--surface-2: oklch(96.7% .005 95);
--surface-hover: #F1F5F9;
--border: oklch(19% .018 264 / .10);
--line: oklch(19% .018 264 / .10);
--line-strong: oklch(19% .018 264 / .19);
--text: oklch(19% .018 264);
--text-strong: oklch(10% .015 260);
--muted: oklch(51% .014 264);
--accent: oklch(50% .194 264);
--accent-link: #2563EB;
--accent-ink: #FFFFFF;
--accent-soft: oklch(50% .194 264 / .085);
--tinta: oklch(19% .018 264);
--tinta-atas: #FFFFFF;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 12px 28px -16px rgba(0, 0, 0, 0.15);
color-scheme: light;
}
/* --- 21.2 Latar Kanvas Obsidian & Ambient Glow Sudut --- */
:root:not([data-theme="light"]) body {
background-color: var(--bg);
background-image:
/* Glow Ungu Kiri Atas (PRD Aturan 2) */
radial-gradient(ellipse 650px 480px at 0% 0%, rgba(135, 87, 232, 0.12) 0%, transparent 70%),
/* Glow Biru Kanan Atas (PRD Aturan 3) */
radial-gradient(ellipse 550px 500px at 100% 8%, rgba(82, 125, 255, 0.08) 0%, transparent 70%);
background-repeat: no-repeat;
background-attachment: scroll; /* Scroll-friendly, zero repaint jank */
}
/* --- 21.3 Hero: Pendaran Cahaya Biru di Balik Judul Utama (PRD Aturan 1) --- */
:root:not([data-theme="light"]) .hero {
position: relative;
overflow: visible;
}
:root:not([data-theme="light"]) .hero::before {
content: "";
position: absolute;
top: 15%;
left: 30%;
transform: translate(-30%, -15%) translateZ(0);
width: min(680px, 88vw);
height: min(340px, 48vw);
background: radial-gradient(ellipse at center, rgba(82, 125, 255, 0.14) 0%, rgba(135, 87, 232, 0.06) 45%, transparent 75%);
pointer-events: none;
z-index: 0;
filter: blur(55px);
}
:root:not([data-theme="light"]) #view-jasa .hero::before {
background: radial-gradient(ellipse at center, rgba(135, 87, 232, 0.12) 0%, rgba(82, 125, 255, 0.06) 50%, transparent 75%);
}
:root:not([data-theme="light"]) .hero > .wrap,
:root:not([data-theme="light"]) .hero .hero-grid {
position: relative;
z-index: 1;
}
/* --- 21.4 Komponen Permukaan Precision Commerce (Double-Bezel & Matte Card) --- */
:root:not([data-theme="light"]) .app {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-card);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow);
transition: transform .32s var(--ease-spring), border-color .32s var(--ease-spring), background .32s var(--ease-spring), box-shadow .32s var(--ease-spring);
}
@media (hover: hover) {
:root:not([data-theme="light"]) .app:hover {
background: var(--surface-hover);
border-color: rgba(82, 125, 255, 0.35);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 32px -14px rgba(0, 0, 0, 0.8);
transform: translateY(-2px);
}
}
:root:not([data-theme="light"]) .hero-kaca {
background: rgba(17, 20, 29, 0.82);
border: 1px solid var(--border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow);
}
:root:not([data-theme="light"]) .nav-in {
background: rgba(17, 20, 29, 0.88);
border: 1px solid var(--border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 30px -18px rgba(0, 0, 0, 0.8);
}
:root:not([data-theme="light"]) .badge-jam-operasional {
background: var(--surface);
border-color: var(--border);
color: var(--text);
}
:root:not([data-theme="light"]) .tools .search input {
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
}
:root:not([data-theme="light"]) .tools .search input:focus {
border-color: var(--ambient-blue);
box-shadow: 0 0 0 3px rgba(82, 125, 255, 0.18);
}
:root:not([data-theme="light"]) .chip {
background: var(--surface);
border-color: var(--border);
color: var(--muted);
}
:root:not([data-theme="light"]) .chip[aria-pressed="true"],
:root:not([data-theme="light"]) .chip.aktif {
background: var(--surface-2);
border-color: var(--ambient-blue);
color: var(--text-strong);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
:root:not([data-theme="light"]) .drawer,
:root:not([data-theme="light"]) .sheet {
background: var(--surface);
border-color: var(--border);
}
:root:not([data-theme="light"]) .b {
background: var(--surface);
border: 1px solid var(--border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow);
}
:root:not([data-theme="light"]) .b2,
:root:not([data-theme="light"]) .b3 {
background: var(--surface);
}
@media (hover: hover) {
:root:not([data-theme="light"]) .b:hover {
background: var(--surface-hover);
border-color: rgba(82, 125, 255, 0.35);
transform: translateY(-2px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 16px 36px -16px rgba(0, 0, 0, 0.85);
}
}
/* --- 21.5 Tombol & CTA Presisi --- */
:root:not([data-theme="light"]) .btn-primary {
background: var(--ambient-blue);
color: #FFFFFF;
border-color: transparent;
box-shadow: 0 8px 24px -10px rgba(82, 125, 255, 0.45);
}
:root:not([data-theme="light"]) .btn-primary:hover {
background: color-mix(in srgb, var(--ambient-blue) 88%, #FFFFFF);
box-shadow: 0 12px 28px -10px rgba(82, 125, 255, 0.6);
}
:root:not([data-theme="light"]) .btn-ghost {
background: transparent;
color: var(--text);
border-color: var(--border);
}
:root:not([data-theme="light"]) .btn-ghost:hover {
background: var(--surface-2);
border-color: rgba(255, 255, 255, 0.25);
color: var(--text-strong);
}
:root:not([data-theme="light"]) #ke-klaim,
:root:not([data-theme="light"]) .drawer-foot .btn-primary {
background: var(--ambient-blue) !important;
color: #FFFFFF !important;
box-shadow: 0 8px 24px -10px rgba(82, 125, 255, 0.45) !important;
}
:root:not([data-theme="light"]) #ke-klaim:hover,
:root:not([data-theme="light"]) .drawer-foot .btn-primary:hover {
background: color-mix(in srgb, var(--ambient-blue) 88%, #FFFFFF) !important;
}
/* --- 21.6 Link & Aksen Teks --- */
:root:not([data-theme="light"]) a:hover {
color: var(--accent-link);
}
:root:not([data-theme="light"]) .status-cta {
color: var(--accent-link) !important;
}
:root:not([data-theme="light"]) .eyebrow::before {
background: var(--ambient-blue);
}
/* --- 21.7 Penyesuaian Responsif Mobile (Android & iPhone POV) --- */
@media (max-width: 640px) {
:root:not([data-theme="light"]) body {
background-image:
radial-gradient(ellipse 320px 240px at 0% 0%, rgba(135, 87, 232, 0.08) 0%, transparent 70%),
radial-gradient(ellipse 260px 240px at 100% 6%, rgba(82, 125, 255, 0.05) 0%, transparent 70%);
}
:root:not([data-theme="light"]) .hero::before {
top: 10%;
left: 50%;
transform: translate(-50%, 0) translateZ(0);
width: 92vw;
height: 180px;
filter: blur(35px);
opacity: 0.7;
}
}
/* --- 21.8 Aksesibilitas: Reduced Motion & Focus Outline --- */
:where(a, button, input, summary):focus-visible {
outline: 2px solid var(--ambient-blue) !important;
outline-offset: 3px !important;
border-radius: 8px !important;
}
@media (prefers-reduced-motion: reduce) {
:root:not([data-theme="light"]) .app,
:root:not([data-theme="light"]) .b,
:root:not([data-theme="light"]) .btn {
transition: none !important;
transform: none !important;
}
}
/* ================================================================
* SISTEM LABEL KATEGORI RISIKO & KEBIJAKAN REFUND (PRD 1.0)
* ================================================================ */
.tag-risiko-hijau {
background: rgba(16, 185, 129, 0.14) !important;
color: #10b981 !important;
border: 1px solid rgba(16, 185, 129, 0.35) !important;
font-weight: 700;
}
.tag-risiko-kuning {
background: rgba(245, 158, 11, 0.14) !important;
color: #f59e0b !important;
border: 1px solid rgba(245, 158, 11, 0.35) !important;
font-weight: 700;
}
.tag-risiko-merah {
background: rgba(239, 68, 68, 0.18) !important;
color: #ef4444 !important;
border: 1px solid rgba(239, 68, 68, 0.45) !important;
font-weight: 800;
}
[data-theme="light"] .tag-risiko-hijau {
background: #ecfdf5 !important;
color: #047857 !important;
border-color: #a7f3d0 !important;
}
[data-theme="light"] .tag-risiko-kuning {
background: #fffbeb !important;
color: #b45309 !important;
border-color: #fde68a !important;
}
[data-theme="light"] .tag-risiko-merah {
background: #fef2f2 !important;
color: #b91c1c !important;
border-color: #fecaca !important;
}
/* Hero Disclaimer Jujur (PRD FR-A1) */
.hero-disclaimer-jujur {
display: flex;
align-items: flex-start;
gap: .65rem;
background: rgba(59, 130, 246, 0.08);
border: 1px solid rgba(59, 130, 246, 0.22);
border-radius: 12px;
padding: .65rem .95rem;
margin: .9rem 0 1.25rem;
font-size: .84rem;
line-height: 1.45;
color: var(--text-muted, #94a3b8);
max-width: 580px;
}
.hero-disclaimer-jujur svg {
width: 18px;
height: 18px;
color: #60a5fa;
flex-shrink: 0;
margin-top: 2px;
}
.hero-disclaimer-jujur b {
color: var(--fg, #f8fafc);
}
.hero-disclaimer-jujur a {
color: #60a5fa;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
white-space: nowrap;
}
.hero-disclaimer-jujur a:hover {
color: #93c5fd;
}
[data-theme="light"] .hero-disclaimer-jujur {
background: #eff6ff;
border-color: #bfdbfe;
color: #1e3a8a;
}
[data-theme="light"] .hero-disclaimer-jujur b {
color: #1e40af;
}
/* Footer Disclaimer Box (PRD FR-A1) */
.footer-disclaimer-box {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
border-radius: 12px;
padding: .85rem 1.1rem;
margin: 1.25rem 0 .75rem;
font-size: .82rem;
color: var(--muted, #94a3b8);
line-height: 1.55;
text-align: left;
}
.footer-disclaimer-box strong {
color: var(--fg, #f8fafc);
}
.footer-disclaimer-box a {
color: #60a5fa;
text-decoration: underline;
}
/* Peringatan Risiko Tinggi di Drawer Checkout (PRD FR-A2) */
.peringatan-risiko-box {
background: rgba(239, 68, 68, 0.12);
border: 1.5px solid rgba(239, 68, 68, 0.5);
border-radius: 12px;
padding: .85rem .95rem;
margin-bottom: .9rem;
text-align: left;
}
.peringatan-risiko-head {
display: flex;
align-items: center;
gap: .45rem;
color: #ef4444;
font-size: .84rem;
font-weight: 800;
margin-bottom: .4rem;
}
.peringatan-risiko-head svg {
width: 17px;
height: 17px;
flex-shrink: 0;
}
.peringatan-risiko-box p {
font-size: .8rem;
color: var(--fg, #f8fafc);
line-height: 1.45;
margin: 0 0 .65rem;
}
.peringatan-risiko-check {
display: flex;
align-items: center;
gap: .55rem;
font-size: .8rem;
font-weight: 700;
color: #f87171;
cursor: pointer;
background: rgba(0, 0, 0, 0.25);
padding: .45rem .6rem;
border-radius: 8px;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.peringatan-risiko-check input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #ef4444;
cursor: pointer;
}