@property --og{syntax:'<angle>';inherits:true;initial-value:30deg}
html[data-tkl="origami"]{
  --kt-bg:#f4efe6;--kt-bgimg:linear-gradient(135deg,rgba(255,255,255,.5) 25%,transparent 25%) 0 0/36px 36px,linear-gradient(225deg,rgba(0,0,0,.018) 25%,transparent 25%) 0 0/36px 36px;
  --kt-card:#fffdf8;--kt-card2:#efe7d8;--kt-ink:#2b2a33;--kt-mut:#6f6a72;--kt-line:rgba(43,42,51,.12);
  --kt-acc:#e4572e;--kt-acc-ink:#fff;--kt-acc2:#17a398;--kt-acc2-ink:#fff;--kt-price:#e4572e;--kt-star:#f3b61f;
  --kt-rad:4px;--kt-rad-s:3px;--kt-rad-btn:4px;--kt-disp:'Fraunces',Georgia,serif;--kt-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--kt-h2w:700;
  --kt-shadow:0 14px 22px -16px rgba(43,42,51,.45);--kt-bd:1px solid rgba(43,42,51,.14);--kt-btn-sh:0 3px 0 #b33d1b;--kt-eic-rad:3px;
  --kt-bar:rgba(244,239,230,.92);--kt-foot:#2b2a33;--kt-foot-ink:#f4efe6;--kt-sum:linear-gradient(135deg,#e4572e,#f08a4b);--kt-sum-ink:#fff;--kt-wallet:linear-gradient(135deg,#3d5a80,#17a398);--kt-wallet-ink:#fff;
  --kt-buy-label:'Lembar pesanan';--kt-cart-label:'Amplop';--kt-login-back:rgba(43,42,51,.5);--kt-login-card:#fffdf8;--kt-ring:rgba(228,87,46,.2);color-scheme:light}
#tkL .og-page .kt-step-i{color:var(--kt-acc);background:#fffdf8;border:1px solid rgba(43,42,51,.15);clip-path:polygon(0 0,78% 0,100% 22%,100% 100%,0 100%)}
#tkL .og-page .kt-step{clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%)}
#tkL .og-page .kt-step em{color:var(--kt-acc2);opacity:.5}
#tkL .og-page .kt-head h2 span{font-style:italic}

#tkL .og-hero{max-width:1220px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(28px,5vw,60px) clamp(16px,4vw,44px) 0}
#tkL .og-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:#fffdf8;border:1px solid rgba(43,42,51,.15);font-size:13px;font-weight:700;color:var(--kt-ink);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);box-shadow:0 6px 12px -8px rgba(0,0,0,.3)}
#tkL .og-chip svg{color:var(--kt-acc)}
#tkL .og-hero h1{margin:20px 0 14px;font:700 clamp(40px,5.6vw,72px)/1.02 var(--kt-disp);letter-spacing:-.02em;color:var(--kt-ink)}
#tkL .og-hero h1 span{font-style:italic;color:var(--kt-acc)}
#tkL .og-copy>p{max-width:46ch;margin:0 0 22px;color:var(--kt-mut);font-size:16px;line-height:1.65}

#tkL .og-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:440px;perspective:1100px}
#tkL .og-fan{position:relative;width:480px;height:270px;transform-style:preserve-3d;transform:rotateX(10deg);animation:ogBreathe 7s ease-in-out infinite alternate}
@keyframes ogBreathe{from{--og:20deg}to{--og:40deg}}
#tkL .og-stage:hover .og-fan{animation-play-state:paused}
#tkL .og-p{display:block;width:92px;height:270px;transform-style:preserve-3d}
#tkL .og-p.first{position:relative;margin-left:calc(240px - 276px * cos(var(--og)));transform:rotateY(var(--og));transform-origin:left center}
#tkL .og-p .og-p{position:absolute;left:100%;top:0;transform-origin:left center}
#tkL .og-p.odd{transform:rotateY(calc(var(--og) * -2))}
#tkL .og-p.even{transform:rotateY(calc(var(--og) * 2))}
#tkL .og-face{position:absolute;inset:0;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px 8px!important;text-align:center;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 22%,#fffdf8),color-mix(in srgb,var(--c) 40%,#fffdf8));color:var(--kt-ink);box-shadow:inset 0 0 0 1px rgba(43,42,51,.1)}
#tkL .og-p.odd>.og-face{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 34%,#e9dfcd),color-mix(in srgb,var(--c) 52%,#d8ccb6))}
#tkL .og-face:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.35),transparent 30%,transparent 70%,rgba(0,0,0,.08))}
#tkL .og-face-pic{display:block;width:64px;height:64px;border-radius:4px;overflow:hidden;box-shadow:0 6px 10px -6px rgba(0,0,0,.5)}
#tkL .og-face b{font:700 13px/1.2 var(--kt-disp);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
#tkL .og-face small{font:700 11.5px var(--kt-body);color:var(--kt-acc)}
#tkL .og-face small small{font-size:9.5px;color:var(--kt-mut)}
#tkL button.og-face:hover{filter:brightness(1.05)}
#tkL .og-face[data-habis]{filter:grayscale(.7)}
#tkL .og-face-deco i{display:block;width:62px;height:62px;background:conic-gradient(from 45deg,var(--c) 0 25%,color-mix(in srgb,var(--c) 60%,#fff) 0 50%,var(--c) 0 75%,color-mix(in srgb,var(--c) 60%,#fff) 0);transform:rotate(45deg);opacity:.75}
#tkL .og-shadow{display:block;width:420px;max-width:90%;height:26px;margin-top:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(43,42,51,.28),transparent)}
@supports not (width:calc(1px * cos(10deg))){#tkL .og-p.first{margin-left:10px}}
@media(max-width:900px){#tkL .og-hero{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){#tkL .og-stage{min-height:340px;overflow:hidden;margin:0 -16px}#tkL .og-fan{transform:rotateX(10deg) scale(.7)}}

#tkL .og-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}
#tkL .og-cat{position:relative;display:flex!important;flex-direction:column;align-items:flex-start;gap:3px;min-height:126px;padding:18px 18px 16px!important;text-align:left;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 16%,#fffdf8),color-mix(in srgb,var(--c) 30%,#fffdf8));
  box-shadow:0 12px 18px -14px rgba(43,42,51,.5);clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%);transition:transform .35s cubic-bezier(.3,1.5,.5,1),clip-path .35s}
#tkL .og-ear{position:absolute;right:0;top:0;width:34px;height:34px;background:linear-gradient(225deg,transparent 50%,color-mix(in srgb,var(--c) 55%,#fffdf8) 50%);filter:drop-shadow(-2px 2px 2px rgba(0,0,0,.15));transition:width .35s,height .35s}
#tkL .og-cat:hover{transform:translateY(-5px) rotate(-1deg);clip-path:polygon(0 0,calc(100% - 52px) 0,100% 52px,100% 100%,0 100%)}
#tkL .og-cat:hover .og-ear{width:52px;height:52px}
#tkL .og-cat-no{font:700 12px var(--kt-body);color:var(--c);filter:brightness(.8)}
#tkL .og-cat b{font:700 20px/1.15 var(--kt-disp);color:var(--kt-ink);overflow-wrap:anywhere}
#tkL .og-cat small{font-size:12.5px;color:var(--kt-mut);font-weight:600}

#tkL .og-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px 22px}
#tkL .og-card{position:relative;display:flex!important;align-items:stretch;padding:0!important;text-align:left;perspective:900px;min-height:170px}
#tkL .og-l,#tkL .og-r{position:relative;flex:1 1 50%;min-width:0;display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.3,1.3,.5,1);box-shadow:0 14px 20px -16px rgba(43,42,51,.55)}
#tkL .og-l{transform-origin:right center;transform:rotateY(24deg);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 30%,#fffdf8),color-mix(in srgb,var(--c) 46%,#efe7d8));padding:12px}
#tkL .og-r{transform-origin:left center;transform:rotateY(-24deg);background:linear-gradient(90deg,#efe7d8,#fffdf8 30%);padding:14px 14px 12px;gap:3px}
#tkL .og-card:hover .og-l,#tkL .og-card:hover .og-r,#tkL .og-card:focus-visible .og-l,#tkL .og-card:focus-visible .og-r{transform:none}
#tkL .og-pic{display:block;flex:1;min-height:120px;border-radius:3px;overflow:hidden;box-shadow:0 6px 12px -8px rgba(0,0,0,.45)}
#tkL .og-r small{font:700 11.5px var(--kt-body);color:var(--kt-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tkL .og-r strong{font:700 17px/1.2 var(--kt-disp);color:var(--kt-ink);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#tkL .og-price{font:700 15.5px var(--kt-body);color:var(--kt-price)}
#tkL .og-price small{font-size:10.5px;color:var(--kt-mut)}
#tkL .og-go,#tkL .og-closed{margin-top:auto;padding:8px 10px;background:var(--c);color:#fff;font:700 12.5px var(--kt-body);text-align:center;clip-path:polygon(0 0,100% 0,100% 100%,8px 100%,0 calc(100% - 8px))}
#tkL .og-closed{background:#2b2a33}
#tkL .og-off{position:absolute;left:-6px;top:10px;padding:4px 10px 4px 8px;background:#2b2a33;color:#fff;font:700 12px var(--kt-body);clip-path:polygon(0 0,100% 0,88% 50%,100% 100%,0 100%)}
#tkL .og-card.is-off .og-pic{filter:grayscale(.85);opacity:.7}
@media(hover:none){#tkL .og-l{transform:rotateY(8deg)}#tkL .og-r{transform:rotateY(-8deg)}}

#tkL .og-ribs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
#tkL .og-rib{position:relative;display:flex!important;align-items:center;gap:12px;padding:12px 28px 12px 12px!important;text-align:left;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 85%,#fff) 0 50%,var(--c) 50%);color:#fff;
  clip-path:polygon(0 0,100% 0,calc(100% - 18px) 50%,100% 100%,0 100%);box-shadow:0 10px 16px -12px rgba(0,0,0,.4);transition:transform .25s}
#tkL .og-rib:hover{transform:translateX(6px)}
#tkL .og-rib-pic{flex:0 0 52px;height:52px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
#tkL .og-rib-t{display:flex;flex-direction:column;flex:1;min-width:0}
#tkL .og-rib b{font:700 15px/1.2 var(--kt-disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tkL .og-rib small{font-size:12px;opacity:.9;font-weight:600}
#tkL .og-rib strong{font:700 14px var(--kt-body);white-space:nowrap}
#tkL .og-rib strong small{font-size:10px}
#tkL .og-rib[style*="#f3b61f"]{color:#2b2a33}
#tkL .og-rib.is-off{opacity:.55}

html[data-tkl="origami"] #app .pcard{border-radius:4px!important;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}

html[data-tkl="origami"] .og-paper{display:flex;flex-direction:column;align-items:center;margin:0 0 14px;perspective:600px}
html[data-tkl="origami"] .og-sheet{position:relative;display:grid;place-items:center;width:130px;height:130px;background:#fffdf8;box-shadow:0 10px 18px -10px rgba(43,42,51,.5),inset 0 0 0 1px rgba(43,42,51,.15);transform-style:preserve-3d;transition:transform .6s,opacity .4s}
html[data-tkl="origami"] .og-fd{position:absolute;inset:0;display:block;transition:transform .55s cubic-bezier(.4,0,.2,1);backface-visibility:visible}
html[data-tkl="origami"] .og-fd.a{clip-path:polygon(0 0,50% 0,0 50%);transform-origin:25% 25%;background:#e4572e}
html[data-tkl="origami"] .og-fd.b{clip-path:polygon(50% 0,100% 0,100% 50%);transform-origin:75% 25%;background:#17a398}
html[data-tkl="origami"] .og-fd.c{clip-path:polygon(100% 50%,100% 100%,50% 100%);transform-origin:75% 75%;background:#f3b61f}
html[data-tkl="origami"] .og-fd.d{clip-path:polygon(0 50%,50% 100%,0 100%);transform-origin:25% 75%;background:#3d5a80}
html[data-tkl="origami"] .og-fd.a.on{transform:rotate3d(1,-1,0,180deg);filter:brightness(.85)}
html[data-tkl="origami"] .og-fd.b.on{transform:rotate3d(1,1,0,-180deg);filter:brightness(.85)}
html[data-tkl="origami"] .og-fd.c.on{transform:rotate3d(1,-1,0,-180deg);filter:brightness(.85)}
html[data-tkl="origami"] .og-fd.d.on{transform:rotate3d(1,1,0,180deg);filter:brightness(.85)}
html[data-tkl="origami"] .og-sname{position:relative;max-width:64px;font:700 11px/1.2 'Fraunces',serif;color:#2b2a33;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateZ(1px)}
html[data-tkl="origami"] .og-plane{position:absolute;left:50%;top:50%;opacity:0;transform:translate(-50%,-50%) scale(.4);transition:transform .9s cubic-bezier(.3,1.2,.4,1),opacity .4s;pointer-events:none}
html[data-tkl="origami"] .og-paper.is-fly .og-plane{opacity:1;transform:translate(10%,-90%) rotate(-12deg) scale(1);animation:ogFly 2.4s ease-in-out .9s infinite alternate}
@keyframes ogFly{to{transform:translate(34%,-110%) rotate(-4deg) scale(1)}}
html[data-tkl="origami"] .og-paper.is-fly .og-sheet{transform:scale(.82)}
html[data-tkl="origami"] .og-lsay{margin-top:12px;font:600 12.5px 'DM Sans',sans-serif;color:var(--kt-mut);text-align:center}
html[data-tkl="origami"] .og-paper.is-fly .og-lsay{color:var(--kt-acc)}
html[data-tkl="origami"] .og-paper-sm .og-lsay{display:none}
html[data-tkl="origami"] :is(#loginModal,#forgotModalTk) .modal{border-top:6px solid #e4572e!important;border-radius:4px!important}

@media(max-width:640px){
  html[data-tkl="origami"] #bottomNav{background:repeating-linear-gradient(90deg,#fffdf8 0 20%,#efe7d8 20% 40%)!important;border:1px solid rgba(43,42,51,.15)!important;box-shadow:0 14px 24px -14px rgba(43,42,51,.55)!important;border-radius:4px!important}
  html[data-tkl="origami"] #bottomNav .bn-item{color:#6f6a72!important}
  html[data-tkl="origami"] #bottomNav .bn-item.on{color:#fff!important}
  html[data-tkl="origami"] #bottomNav .bn-item::before{background:linear-gradient(135deg,#e4572e 50%,#c9441f 50%);border-radius:2px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
}
@media(prefers-reduced-motion:reduce){#tkL .og-fan{animation:none}}