/* Mimon POS web — gaya bersama semua halaman (beranda, privasi, S&K, panduan). Gaya khusus halaman tetap inline. */
/* Token & dasar */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);--p:#A63D40;--soft:#F8E7E7;--bg:#F7F9FA;--surface:#fff;--line:#E4E8ED;--fg:#1F2937;--muted:#596170;--ok:#0E6B53;--cloud:#1F5F9E;--cloud-soft:#E3EEF9;--pro-ink:#A63D40;--r:14px}
:root:not([data-theme="light"]){}@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#121417;--surface:#1B1E23;--line:#2E333B;--fg:#E8EAEE;--muted:#9AA3AF;--soft:#3D1F20;--cloud:#8CC0F0;--cloud-soft:#16283A;--pro-ink:#F0A7A9}}:root[data-theme="dark"]{--bg:#121417;--surface:#1B1E23;--line:#2E333B;--fg:#E8EAEE;--muted:#9AA3AF;--soft:#3D1F20;--cloud:#8CC0F0;--cloud-soft:#16283A;--pro-ink:#F0A7A9}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--fg);line-height:1.55;font-variant-numeric:tabular-nums}
a{color:inherit}img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
/* Footer selalu di bawah walau isi pendek: body kolom setinggi layar, main mengisi sisa ruang. */
body{display:flex;flex-direction:column;min-height:100vh;min-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}main{flex:1 0 auto;width:100%}header,footer{flex:none}
/* Wordmark "mimon POS": "POS" kecil berjarak, abu-abu — merek kata = MIMON */
.wmk{white-space:nowrap}.wmk .pos{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:700;font-size:.5em;letter-spacing:.12em;color:var(--muted);margin-left:.4em;vertical-align:.3em}
/* Header & tombol */
header{position:sticky;top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:5;padding-top:env(safe-area-inset-top,0px)}
.nav{display:flex;align-items:center;gap:18px;height:64px}.nav .brand{display:flex;align-items:center;gap:10px;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:800;font-size:22px;text-decoration:none;color:var(--p)}
.nav .links{margin-left:auto;display:flex;gap:18px;font-size:14px;font-weight:600}.nav .links a{text-decoration:none;color:var(--muted)}.nav .links a:hover{color:var(--fg)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:12px;font-weight:700;font-size:15px;text-decoration:none;border:0;cursor:pointer;background:var(--surface);color:var(--fg);border:1px solid var(--line)}
.btn.pri{background:var(--p);color:#fff;border-color:var(--p)}.btn.wa{background:#25D366;color:#fff;border-color:#25D366}
.btn.sm{padding:8px 14px;font-size:13px;border-radius:10px;gap:6px}
.fab{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);z-index:20;text-decoration:none}
.fab:hover{transform:translateY(-2px)}.fab:focus-visible{outline:3px solid var(--soft);outline-offset:3px}
/* Tombol "Coba demo" di navbar (desktop); di HP pindah ke menu hamburger, di bawah Panduan */
.nav-demo{background:var(--p);color:#fff;border-color:var(--p);white-space:nowrap}.nav-demo:hover{filter:brightness(1.08)}
@media(max-width:820px){.nav-demo{display:none}.mnav a.m-demo{color:var(--p)}}
/* Menu HP (hamburger) */
.menu-btn{display:none;margin-left:auto;width:42px;height:42px;border:0;background:none;color:var(--fg);border-radius:10px;align-items:center;justify-content:center;cursor:pointer}.menu-btn:hover{background:var(--surface)}.menu-btn .i-close,.menu-btn.x .i-open{display:none}.menu-btn.x .i-close{display:block}.mnav{display:none}
@media(max-width:820px){.menu-btn{display:inline-flex}.mnav.open{display:grid;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);padding:4px 20px 12px;box-shadow:0 18px 24px -18px rgba(0,0,0,.35)}.mnav a{padding:14px 2px;font-size:16px;font-weight:600;text-decoration:none;color:var(--fg);border-bottom:1px solid var(--line)}.mnav a:last-child{border-bottom:0}}
/* Judul bagian */
section{padding:56px 0}h2{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:clamp(26px,3.4vw,36px);margin:0 0 10px;letter-spacing:-.3px}.sub{color:var(--muted);font-size:17px;margin:0 0 32px;max-width:640px}
/* Footer */
footer{border-top:1px solid var(--line);font-size:13px;color:var(--muted)}footer a{text-decoration:none}footer a:hover{color:var(--fg)}footer .sp{flex:1}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding:40px 20px 28px}
footer .fbrand{display:flex;align-items:center;gap:10px;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:800;font-size:20px;color:var(--p);margin-bottom:10px}
footer .cols p{margin:0;max-width:320px;line-height:1.6}footer .fh{margin:0 0 12px;color:var(--fg);font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.02em}
footer .list{display:grid;gap:9px}footer .list a{display:inline-flex;align-items:center;gap:8px}
footer .bottom{display:flex;gap:18px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);padding:18px 20px 28px}
/* Ornamen merek (motif struk kasir): gerigi, watermark struk "L", garis putus-putus. Warna dari token → ikut terang/gelap. */
:root{--m-zz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='7'%3E%3Cpath d='M0 0h14L7 7z'/%3E%3C/svg%3E");--m-rc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 150'%3E%3Cdefs%3E%3Cmask id='k'%3E%3Cpath fill='white' d='M12 0h96a12 12 0 0 1 12 12v130l-10 8-10-8-10 8-10-8-10 8-10-8-10 8-10-8-10 8-10-8-10 8-10-8-10 8V12A12 12 0 0 1 12 0z'/%3E%3Cpath d='M34 104V40l26 35 26-35v64' stroke='black' stroke-width='15' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='120' height='150' fill='white' mask='url(%23k)'/%3E%3C/svg%3E")}
body{overflow-x:clip}
header::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--p)}
main section>h2::before,.legal h1::before{content:"";display:block;width:42px;height:7px;margin-bottom:14px;background:var(--p);-webkit-mask:var(--m-zz) repeat-x 0 0/14px 7px;mask:var(--m-zz) repeat-x 0 0/14px 7px}
.legal{position:relative}.legal::after{content:"";position:absolute;right:0;top:36px;width:150px;height:188px;background:var(--p);opacity:.06;transform:rotate(12deg);pointer-events:none;-webkit-mask:var(--m-rc) center/contain no-repeat;mask:var(--m-rc) center/contain no-repeat}
@media(max-width:900px){.legal::after{display:none}}
footer{position:relative;overflow:hidden;border-top:0;background:linear-gradient(180deg,transparent,var(--soft) 260%)}footer>*{position:relative;z-index:1}
footer::before{content:"";display:block;height:7px;background:var(--p);opacity:.85;-webkit-mask:var(--m-zz) repeat-x 0 0/14px 7px;mask:var(--m-zz) repeat-x 0 0/14px 7px}
footer::after{content:"";position:absolute;right:-36px;bottom:-64px;width:220px;height:275px;background:var(--p);opacity:.07;transform:rotate(-12deg);pointer-events:none;-webkit-mask:var(--m-rc) center/contain no-repeat;mask:var(--m-rc) center/contain no-repeat}
footer .bottom{border-top:0;background:linear-gradient(90deg,var(--p) 0 6px,transparent 6px 12px) top left/12px 1.5px repeat-x}
.pill{display:inline-block;background:var(--soft);color:var(--p);font-weight:700;font-size:12px;padding:5px 12px;border-radius:999px;margin-bottom:14px}
@media(max-width:820px){footer .cols{grid-template-columns:1fr;gap:24px}.nav .links{display:none}}
/* Halaman dokumen: privasi, S&K, panduan */
.legal{padding-top:48px;padding-bottom:72px}.legal article{max-width:820px}.legal h1{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:clamp(30px,4vw,40px);margin:0 0 6px;letter-spacing:-.3px}.legal .meta{color:var(--muted);font-size:14px;margin:0 0 28px}.legal h2{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:20px;margin:34px 0 10px}.legal p,.legal li{font-size:15.5px;line-height:1.7}.legal ul{padding-left:20px;margin:0 0 12px}.legal li{margin:4px 0}.legal a{color:var(--p)}.legal hr{border:0;border-top:1px solid var(--line);margin:32px 0}.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-weight:600;font-size:14px;margin-bottom:22px}.back:hover{color:var(--fg)}
/* Bingkai perangkat untuk screenshot (beranda & panduan); .tab = tablet mendatar */
.device{background:#111418;border-radius:26px;padding:8px;box-shadow:0 0 0 1px var(--line),0 16px 28px -20px rgba(0,0,0,.4)}.device img{display:block;width:100%;height:auto;border-radius:19px;object-fit:cover;background:var(--surface)}
.device.tab{border-radius:20px;padding:9px}.device.tab img{aspect-ratio:16/9;border-radius:12px}
@media(max-width:820px){.device.tab{border-radius:14px;padding:6px}.device.tab img{border-radius:9px}}
/* Badge Google Play: jangan dihimpit wadah flex (rasio asli 646×250 wajib utuh — pedoman merek) */
/* Badge "Dapatkan di Google Play" (file resmi 646×250 dengan ruang transparan; area hitam = baris 29–221 → 192 px).
   Area hitam dibuat setinggi tombol .btn (--badge-h = tinggi alami .btn: 15px × 1.55 + padding 24 + border 2), lalu ruang
   transparan dipangkas dengan margin negatif agar kotak tautan = tinggi tombol dan baris tidak melar. */
.play-badge{--badge-h:calc(15px * 1.55 + 26px);display:inline-flex;align-items:center;flex:none;line-height:0;border-radius:10px}
.play-badge img{display:block;height:calc(var(--badge-h) * 250 / 192);width:auto;max-width:none;max-height:none;flex:none;margin:calc((var(--badge-h) - var(--badge-h) * 250 / 192) / 2) -4px}
.play-badge:hover img{filter:brightness(1.15)}.play-badge:focus-visible{outline:3px solid var(--soft);outline-offset:2px}
/* Kartu artikel (beranda, /artikel, "Artikel lainnya") — sampul 1200×630 */
.art-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;margin:0;padding:0}
.art-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--fg);transition:border-color .15s,transform .15s}
.art-card:hover{border-color:var(--p);transform:translateY(-2px)}.art-card:focus-visible{outline:3px solid var(--soft);outline-offset:2px}
.art-card img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;background:var(--soft)}
.art-card .b{padding:14px 16px 16px;display:grid;gap:6px}
.art-card h2,.art-card h3{margin:0!important;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:17px!important;line-height:1.35;letter-spacing:-.1px}.art-card:hover h2,.art-card:hover h3{color:var(--p)}
.art-card h2::before,.art-card h3::before{content:none!important}
.legal .art-card,.art-card h2,.art-card h3{color:var(--fg)}.art-card:hover h2,.art-card:hover h3{color:var(--p)}
.art-card p{margin:0!important;color:var(--muted);font-size:14.5px!important;line-height:1.5}.art-card time{font-size:12.5px;color:var(--muted)}
.more-art{margin:18px 0 0}.more-art a{color:var(--p);font-weight:700;text-decoration:none}.more-art a:hover{text-decoration:underline}
/* Pratinjau gambar (lightbox) — lihat site.js */
.device img{cursor:zoom-in}.device img:focus-visible{outline:3px solid var(--p);outline-offset:3px}
.lb{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:transparent;color:#fff}.lb::backdrop{background:rgba(10,12,15,.94);backdrop-filter:blur(6px)}
.lb figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:56px 64px 24px;cursor:zoom-out}
.lb img{max-width:100%;max-height:calc(100dvh - 120px);width:auto;height:auto;border-radius:14px;box-shadow:0 20px 60px -20px rgba(0,0,0,.6);cursor:default;background:var(--surface)}
.lb figcaption{font-size:14px;text-align:center;opacity:.9}
.lb button{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:50%;width:44px;height:44px;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center}.lb button:hover{background:rgba(255,255,255,.26)}
.lb-x{top:14px;right:14px;font-size:18px!important}.lb-nav{top:50%;transform:translateY(-50%)}.lb-prev{left:14px}.lb-next{right:14px}
html.lb-open{overflow:hidden}.lb button[hidden]{display:none}
@media(max-width:600px){.lb figure{padding:64px 12px 76px}.lb img{max-height:calc(100dvh - 180px)}.lb-nav{top:auto;bottom:14px;transform:none}}