*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--s:8px;--m:12px;--l:20px;--xl:52px;--navh:52px;--bg:#f7f5f0;--card:#ffffff;--line:#e8e4dd;--line2:#f0ece5;--txt:#2a2623;--mut:#8a8478;--mut2:#b8b0a3;--x:#1d9bf0;--ig:#e1306c;--tt:#fe2c55;--ok:#2a9d8f;--warn:#e9a319;--ink:#22201d;--pink:#ff5da2}
html{scroll-behavior:smooth}
body{font-family:'Space Grotesk',system-ui,sans-serif;font-size:14px;background:var(--bg);color:var(--txt);overflow-x:hidden;background-image:radial-gradient(#0000000a 1px,transparent 1px);background-size:24px 24px;-webkit-tap-highlight-color:transparent}
::selection{background:#ffd66b;color:var(--ink)}
a{text-decoration:none;color:inherit}
[hidden]{display:none!important}
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
body[data-view="stok"] .home-only{display:none}
.stok-only{display:none}
body[data-view="home"] .stok-only{display:none}
body[data-view="stok"] .stok-only{display:inline-flex}
.nav{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.nav-in{max-width:1180px;margin:0 auto;min-height:var(--navh);padding:6px 16px;display:flex;align-items:center;gap:var(--s);flex-wrap:wrap;row-gap:6px}
.nav-icon{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--card);display:inline-flex;align-items:center;justify-content:center;color:var(--mut);cursor:pointer;transition:all .2s;flex:none}
.nav-icon:hover{color:var(--ink);border-color:#d4cfc6;background:var(--line2)}
.nav-icon .ic{width:18px;height:18px}
.brand{display:flex;align-items:center;gap:8px;flex:none}
.brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#ff9a5a,#ff5da2,#7c4dff);display:grid;place-items:center;color:#fff;font-weight:800;font-size:.82rem;box-shadow:0 2px 6px #ff5da233}
.brand-name{font-weight:700;font-size:.88rem;letter-spacing:.5px;color:var(--ink)}
.brand-name b{color:var(--pink)}
.links{display:flex;gap:var(--l);margin-left:auto}
.links a{font-size:.72rem;font-weight:600;color:var(--mut);transition:color .2s}
.links a:hover{color:var(--ink)}
.nav-cta{border:none;background:var(--ink);color:#fff;font:700 .7rem 'Space Grotesk';padding:8px 16px;border-radius:999px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 12px #00000020}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 18px #00000028}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:999px;padding:12px 22px;font:700 .78rem 'Space Grotesk';cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn-p{background:var(--ink);color:#fff;box-shadow:0 6px 16px #00000026}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 12px 24px #00000030}
.btn-s{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:0 3px 10px #0000000d}
.btn-s:hover{transform:translateY(-3px);border-color:#d4cfc6}
.btn-w{background:#fff;color:var(--ink);box-shadow:0 8px 20px #00000026}
.btn-w:hover{transform:translateY(-3px) scale(1.02)}
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--card);padding:9px 0;margin-top:var(--l)}
.track{display:flex;gap:10px;width:max-content;animation:scroll 26s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track span{font-size:.66rem;font-weight:700;color:var(--mut);background:var(--bg);border:1px solid var(--line);padding:5px 14px;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.track .ic{width:12px;height:12px}
@keyframes scroll{to{transform:translateX(-50%)}}
.sec{max-width:1180px;margin:0 auto;padding:var(--xl) 16px 0}
.sec-head{text-align:center;max-width:560px;margin:0 auto var(--l)}
.sec-head .eb{font-size:.58rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--pink)}
.sec-head h2{font-size:clamp(1.3rem,3.5vw,1.9rem);font-weight:700;letter-spacing:-.5px;color:var(--ink);margin:6px 0 8px}
.sec-head p{font-size:.76rem;color:var(--mut);line-height:1.6}
#toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:#fff;font-size:.68rem;font-weight:700;padding:9px 16px;border-radius:999px;z-index:60;transition:.3s cubic-bezier(.2,1.3,.4,1);box-shadow:0 10px 26px #00000030}
#toast.on{transform:translate(-50%,0);opacity:1}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,1,.3,1);transition-delay:var(--d,0s)}
.reveal.on{opacity:1;transform:none}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.35}}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.site-menu{position:relative;flex:none}
.site-menu-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--card);display:inline-flex;align-items:center;justify-content:center;color:var(--mut);cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.site-menu-btn:hover{color:var(--ink);border-color:#d4cfc6;background:var(--line2)}
.site-menu-btn[aria-expanded="true"]{color:var(--ink);border-color:#d4cfc6;background:var(--line2)}
.site-menu-btn .ic{width:18px;height:18px}
.site-menu-list{position:absolute;right:0;top:calc(100% + 8px);width:220px;max-width:calc(100vw - 24px);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 38px #00000024;padding:6px;display:grid;gap:2px;z-index:70}
.site-menu-list[hidden]{display:none!important}
.site-menu-item{display:flex;align-items:center;gap:9px;width:100%;border:none;background:none;padding:9px 10px;border-radius:9px;font:600 .72rem 'Space Grotesk';color:var(--txt);cursor:pointer;text-align:left;transition:background .15s,color .15s}
.site-menu-item:hover{background:var(--bg);color:var(--ink)}
.site-menu-item .ic{width:15px;height:15px;color:var(--mut);flex:none}
.site-menu-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-modal-ov{position:fixed;inset:0;z-index:1400;background:#00000073;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));animation:siteFade .18s ease}
.site-modal{width:min(430px,100%);max-height:min(86vh,720px);overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px #00000040;padding:18px 18px 16px;position:relative;animation:modalIn .24s cubic-bezier(.2,.9,.3,1.05);overscroll-behavior:contain}
.site-modal h3{font-size:1rem;line-height:1.35;font-weight:800;color:var(--ink);padding-right:38px;margin-bottom:8px}
.site-modal p{font-size:.78rem;line-height:1.65;color:var(--txt);overflow-wrap:anywhere;margin-bottom:14px}
.site-modal-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;border:none;background:var(--line2);color:var(--mut);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.site-modal-x:hover{background:var(--line);color:var(--ink)}
.site-modal-x .ic{width:15px;height:15px}
.site-modal-ctas{display:grid;gap:8px}
.site-cta{display:flex;align-items:center;gap:10px;min-height:42px;padding:10px 13px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:700 .76rem 'Space Grotesk';cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.site-cta:hover{border-color:#d4cfc6;background:var(--line2);transform:translateY(-1px)}
.site-cta .ic{width:16px;height:16px;flex:none;color:var(--mut)}
.site-cta span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-cta.tg{border-color:#229ed940;color:#1275a8;background:#eff9ff}
.site-cta.tg:hover{border-color:#229ed9;background:#e0f2fe}
.site-cta.tg .ic{color:#1275a8}
.site-cta.wa{border-color:#25d36640;color:#128c4b;background:#f0fdf4}
.site-cta.wa:hover{border-color:#25d366;background:#dcfce7}
.site-cta.wa .ic{color:#128c4b}
.site-modal-note{font-size:.72rem;line-height:1.55;color:var(--mut);margin:0}
@keyframes siteFade{from{opacity:0}}
@media (max-width:640px){
.nav-in{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.site-menu-list{width:205px}
.site-menu-item{font-size:.68rem;padding:8px 9px}
.site-modal{padding:16px 15px 14px;border-radius:16px}
.site-modal h3{font-size:.95rem}
.site-modal p,.site-cta{font-size:.73rem}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
.reveal{opacity:1;transform:none}
}