html[data-tkl="kopi"]{
  --kt-bg:#f3e7d3;--kt-bgimg:radial-gradient(circle at 20% 10%,rgba(200,105,43,.10),transparent 40%),radial-gradient(circle at 90% 60%,rgba(46,59,51,.08),transparent 45%);
  --kt-card:#fffaf1;--kt-card2:#ead9bd;--kt-ink:#3b2417;--kt-mut:#8a6a52;--kt-line:rgba(59,36,23,.14);
  --kt-acc:#c8692b;--kt-acc-ink:#fff;--kt-acc2:#2e3b33;--kt-acc2-ink:#f3efe4;--kt-price:#9c4a1c;--kt-star:#c8692b;
  --kt-rad:20px;--kt-rad-s:14px;--kt-rad-btn:999px;--kt-disp:'DM Serif Display',Georgia,serif;--kt-body:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;--kt-h2w:400;
  --kt-shadow:0 14px 30px -18px rgba(59,36,23,.45);--kt-bd:1.5px solid rgba(59,36,23,.14);--kt-btn-sh:0 4px 0 #8a4318;
  --kt-bar:rgba(255,250,241,.86);--kt-foot:#2e3b33;--kt-foot-ink:#f3efe4;--kt-sum:#2e3b33;--kt-sum-ink:#f3efe4;--kt-wallet:#2e3b33;--kt-wallet-ink:#f3efe4;
  --kt-buy-label:'☕ Pesanan baru';--kt-cart-label:'🧾 Nampan pesanan';--kt-login-back:rgba(43,26,15,.72);--kt-login-card:#fffaf1;--kt-ring:rgba(200,105,43,.2);color-scheme:light}
#tkL .ko-page{font-family:var(--kt-body)}

#tkL .ko-hero{position:relative;max-width:1220px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(36px,6vw,80px) clamp(16px,4vw,44px) 0}
#tkL .ko-chip{display:inline-block;padding:8px 14px;border-radius:999px;background:var(--kt-card);border:var(--kt-bd);font-size:13px;font-weight:700;color:var(--kt-price)}
#tkL .ko-hero h1{margin:18px 0 14px;font:400 clamp(44px,6.6vw,84px)/.98 var(--kt-disp);letter-spacing:-.01em}
#tkL .ko-hero h1 span{color:var(--kt-acc);font-style:italic}
#tkL .ko-copy>p{max-width:46ch;margin:0 0 22px;color:var(--kt-mut);font-size:16px;line-height:1.6}
#tkL .ko-board{position:relative;padding-bottom:40px}
#tkL .ko-slate{position:relative;padding:28px 26px 22px;border-radius:14px;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.06),transparent 50%),#26302a;color:#f3efe4;border:14px solid #8a5a36;box-shadow:inset 0 0 40px rgba(0,0,0,.45),0 30px 50px -24px rgba(59,36,23,.7);transform:rotate(-1.2deg)}
#tkL .ko-slate:before{content:'';position:absolute;inset:-14px;border-radius:14px;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(0,0,0,.06) 22px 24px);mix-blend-mode:multiply}
#tkL .ko-chalk-t{display:block;text-align:center;font:700 clamp(30px,4vw,42px)/1 'Caveat',cursive;color:#fff}
#tkL .ko-chalk-s{display:block;text-align:center;margin:2px 0 14px;font:600 18px 'Caveat',cursive;color:#e7c79a}
#tkL .ko-mrow{display:flex!important;align-items:baseline;gap:8px;width:100%;padding:7px 2px!important;text-align:left;font:600 21px/1.2 'Caveat',cursive!important;color:#f3efe4!important;transition:color .2s,transform .2s}
#tkL .ko-mrow:hover{color:#ffcf8a!important;transform:translateX(4px)}
#tkL .ko-mname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tkL .ko-mrow i{flex:1;min-width:20px;border-bottom:2px dotted rgba(243,239,228,.45);transform:translateY(-5px)}
#tkL .ko-mrow b{font-weight:700;white-space:nowrap;color:#ffcf8a}
#tkL .ko-mrow b small{font-size:.75em;opacity:.8}
@media(max-width:480px){#tkL .ko-mrow b small{display:none}#tkL .ko-slate{padding:22px 16px 18px;border-width:10px}}
#tkL .ko-mrow[data-habis] {opacity:.45;text-decoration:line-through}
#tkL .ko-slate-more{display:block!important;margin:14px auto 0;font:700 19px 'Caveat',cursive!important;color:#e7c79a!important;text-decoration:underline wavy rgba(231,199,154,.5)}
#tkL .ko-mug{position:absolute;left:-18px;bottom:0;width:110px;height:84px;border-radius:0 0 44px 44px;background:linear-gradient(90deg,#fffaf1,#efe1c8);box-shadow:0 18px 26px -14px rgba(59,36,23,.6),inset 0 -8px 0 rgba(59,36,23,.06)}
#tkL .ko-mug:before{content:'';position:absolute;right:-30px;top:14px;width:34px;height:38px;border:9px solid #efe1c8;border-left:0;border-radius:0 22px 22px 0}
#tkL .ko-mug:after{content:'';position:absolute;left:8px;right:8px;top:0;height:16px;border-radius:50%;background:radial-gradient(ellipse at center,#d9a066 0 30%,#7a4a2a 60%)}
#tkL .ko-mug i{position:absolute;bottom:92px;width:10px;height:40px;border-radius:50%;border-left:4px solid rgba(138,106,82,.45);animation:koSteam 3.2s ease-in-out infinite}
#tkL .ko-mug .s1{left:28px}#tkL .ko-mug .s2{left:50px;animation-delay:.8s}#tkL .ko-mug .s3{left:72px;animation-delay:1.6s}
@keyframes koSteam{0%{transform:translateY(10px) scaleY(.6);opacity:0}40%{opacity:1}100%{transform:translateY(-24px) scaleY(1.1) skewX(10deg);opacity:0}}
@media(max-width:900px){#tkL .ko-hero{grid-template-columns:minmax(0,1fr)}#tkL .ko-board{max-width:520px;width:100%;margin:0 auto}#tkL .ko-mug{left:auto;right:-6px;transform:scale(.8);transform-origin:bottom right}}

#tkL .ko-bags{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
#tkL .ko-bag{position:relative;display:flex!important;flex-direction:column;align-items:center;min-height:200px;padding:30px 12px 16px!important;border-radius:10px 10px 18px 18px;background:linear-gradient(180deg,#d9b98a,#c9a46f);box-shadow:var(--kt-shadow),inset 0 -10px 18px rgba(0,0,0,.08);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
#tkL .ko-bag:hover{transform:translateY(-8px) rotate(-2deg)}
#tkL .ko-bag-top{position:absolute;left:0;right:0;top:0;height:22px;border-radius:10px 10px 0 0;background:repeating-linear-gradient(90deg,#b98e57 0 6px,#c9a46f 6px 12px);box-shadow:0 3px 0 rgba(0,0,0,.1)}
#tkL .ko-bag-lbl{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;margin-top:14px;padding:14px 8px;border-radius:8px;background:var(--c);color:#fff;text-align:center;box-shadow:0 0 0 3px rgba(255,255,255,.3) inset}
#tkL .ko-bag-lbl small{font:700 10.5px var(--kt-body);letter-spacing:.14em;opacity:.8}
#tkL .ko-bag-lbl b{font:400 19px/1.15 var(--kt-disp);overflow-wrap:anywhere}
#tkL .ko-bag-lbl em{font:600 12px var(--kt-body);font-style:normal;opacity:.85}
#tkL .ko-bean{margin-top:auto;width:24px;height:32px;border-radius:50%;background:#5a3420;box-shadow:inset -4px 0 0 #3b2417;position:relative;transform:rotate(25deg)}
#tkL .ko-bean:after{content:'';position:absolute;left:50%;top:4px;bottom:4px;width:2px;background:#c9a46f;border-radius:2px;transform:translateX(-50%) rotate(8deg)}

#tkL .ko-cups{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:26px 18px}
#tkL .ko-cup{position:relative;display:flex!important;flex-direction:column;gap:4px;padding:22px 16px 16px!important;border-radius:6px 6px 18px 18px;background:#e2c99f;text-align:left;box-shadow:var(--kt-shadow);transform:rotate(var(--r));clip-path:polygon(14% 0,86% 0,100% 9%,100% 100%,0 100%,0 9%);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
#tkL .ko-cup:hover{transform:rotate(0) translateY(-8px)}
#tkL .ko-tag-hole{position:absolute;left:50%;top:9px;width:12px;height:12px;border-radius:50%;background:var(--kt-bg);box-shadow:inset 0 1px 2px rgba(0,0,0,.25);transform:translateX(-50%)}
#tkL .ko-saucer{position:relative;align-self:center;display:grid;place-items:center;width:78%;aspect-ratio:1;margin:10px 0 8px;border-radius:50%;background:radial-gradient(circle,#fffaf1 62%,#e8dccb 63% 70%,#fffaf1 71%);box-shadow:0 12px 20px -10px rgba(59,36,23,.6)}
#tkL .ko-foam{display:block;width:66%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 7px #b47a45,0 0 0 11px #fffaf1;transition:transform .5s}
#tkL .ko-cup:hover .ko-foam{transform:rotate(18deg)}
#tkL .ko-foam .ko-media img{padding:16%}
#tkL .ko-handle{position:absolute;right:2%;top:42%;width:18%;height:14%;border-radius:0 40px 40px 0;border:6px solid #fffaf1;border-left:0}
#tkL .ko-cup strong{font:400 18px/1.2 var(--kt-disp);overflow-wrap:anywhere}
#tkL .ko-cup>small{color:var(--kt-mut);font-size:12.5px}
#tkL .ko-cup-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding-top:10px;border-top:2px dashed rgba(59,36,23,.25)}
#tkL .ko-cup-foot b{font:800 15px var(--kt-body);color:var(--kt-price)}
#tkL .ko-cup-foot b small{font-weight:600;font-size:11px;color:var(--kt-mut)}
#tkL .ko-cup-foot i{font-style:normal;padding:6px 12px;border-radius:999px;background:var(--kt-acc2);color:var(--kt-acc2-ink);font:700 12px var(--kt-body)}
#tkL .ko-off{position:absolute;right:12px;top:24px;padding:6px 9px;border-radius:50%;background:var(--kt-acc);color:#fff;font:800 12px var(--kt-body);transform:rotate(12deg);box-shadow:0 3px 0 #8a4318}
#tkL .ko-closed{position:absolute;left:12px;top:24px;padding:4px 9px;border-radius:6px;background:#3b2417;color:#f3e7d3;font:700 11px var(--kt-body)}
#tkL .ko-cup.is-off{filter:grayscale(.7);opacity:.72}

#tkL .ko-hhbox{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;padding:clamp(20px,3vw,34px);border-radius:16px;background:#26302a;color:#f3efe4;border:12px solid #8a5a36;box-shadow:inset 0 0 40px rgba(0,0,0,.45),var(--kt-shadow)}
#tkL .ko-hh-h{display:flex;flex-direction:column;justify-content:center;text-align:center;font-family:'Caveat',cursive}
#tkL .ko-hh-h span{font:700 44px/1 'Caveat',cursive;color:#e7c79a}
#tkL .ko-hh-h b{font:400 68px/.9 var(--kt-disp);color:#fff;font-style:italic}
#tkL .ko-hh-h small{margin-top:8px;font:600 20px 'Caveat',cursive;color:#ffcf8a}
#tkL .ko-hh-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#tkL .ko-hh{display:flex!important;align-items:center;gap:12px;padding:10px 12px!important;border-radius:12px;border:1.5px dashed rgba(243,239,228,.3)!important;text-align:left;color:#f3efe4!important;transition:background .2s}
#tkL .ko-hh:hover{background:rgba(255,255,255,.06)}
#tkL .ko-hh-n{font:700 24px 'Caveat',cursive;color:#e7c79a}
#tkL .ko-hh-pic{flex:0 0 auto;width:44px;height:44px;border-radius:50%;overflow:hidden;background:#fff}
#tkL .ko-hh-t{flex:1;min-width:0;display:flex;flex-direction:column}
#tkL .ko-hh-t b{font:600 15px var(--kt-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tkL .ko-hh-t small{font-size:12px;opacity:.65}
#tkL .ko-hh strong{font:700 21px 'Caveat',cursive;color:#ffcf8a;white-space:nowrap}
#tkL .ko-hh.is-off{opacity:.45}
@media(max-width:820px){#tkL .ko-hhbox{grid-template-columns:minmax(0,1fr)}#tkL .ko-hh-list{grid-template-columns:minmax(0,1fr)}#tkL .ko-hh-h b{font-size:52px}}
#tkL .ko-page .kt-step{background:#fffaf1;border-style:dashed}
#tkL .ko-page .kt-step em{font-family:'Caveat',cursive}

html[data-tkl="kopi"] .ko-receipt{display:block;position:relative;margin:4px auto 16px;width:min(240px,90%);text-align:center}
html[data-tkl="kopi"] .ko-printer{display:block;height:20px;border-radius:10px;background:linear-gradient(#4a3426,#2b1a0f);box-shadow:0 6px 10px -4px rgba(0,0,0,.4)}
html[data-tkl="kopi"] .ko-printer i{display:block;margin:7px auto 0;width:80%;height:4px;border-radius:2px;background:#120a05}
html[data-tkl="kopi"] .ko-paper{display:block;position:relative;margin:-6px auto 0;width:84%;padding:14px 12px 20px;background:#fffdf8;color:#3b2417;font:600 11.5px/1.5 'Courier New',monospace;box-shadow:0 8px 14px -8px rgba(59,36,23,.4);
  max-height:calc(62px + var(--f,0) * 110px);overflow:hidden;transition:max-height .35s ease;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) bottom/12px 8px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) bottom/12px 8px repeat-x}
html[data-tkl="kopi"] .ko-paper b{display:block;font:400 18px/1.1 var(--kt-disp);margin-bottom:2px}
html[data-tkl="kopi"] .ko-paper small{display:block;padding-bottom:6px;border-bottom:1.5px dashed rgba(59,36,23,.35);font-size:10px;letter-spacing:.08em}
html[data-tkl="kopi"] .ko-line{display:flex;justify-content:space-between;padding-top:6px}
html[data-tkl="kopi"] .ko-thanks{display:block;margin-top:8px;padding-top:6px;border-top:1.5px dashed rgba(59,36,23,.35);font-size:10px}
html[data-tkl="kopi"] .ko-receipt.is-full .ko-paper{animation:koTear .5s ease}
@keyframes koTear{50%{transform:translateY(4px) rotate(1deg)}}
html[data-tkl="kopi"] .ko-receipt-sm .ko-paper{max-height:none}
html[data-tkl="kopi"] :is(#loginModal,#forgotModalTk) .modal{background:linear-gradient(180deg,#fffaf1,#f3e7d3)!important}