@font-face { font-family: "Catatan"; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/instrumentserif/v5/jizHRFtNs2ka5fXjeivQ4LroWlx-6zAjjH7Motmp5g.woff2) format("woff2"); }
/* ICHZA · Nota Karya — meja kerja: kertas, nota, stempel, coretan tangan */
:root {
  --paper: #efe9dc;
  --paper-2: #e6dfcf;
  --paper-3: #fbf8f1;
  --ink: #191714;
  --ink-2: #3d3a34;
  --mute: #5f5849;
  --line: #d3cab6;
  --red: #d93a26;
  --red-t: #a8291a;
  --green: #1e5b3a;
  --yellow: #ffd93b;
  --tg: #2aabee;
  --wa: #1fa855;
  --disp: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --hand: "Catatan", "Instrument Serif", Georgia, serif;
  --serif: "Instrument Serif", Georgia, serif;
  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 48px);
  --shadow: 0 1px 1px rgba(40,30,10,.08), 0 6px 14px -4px rgba(40,30,10,.18), 0 22px 40px -18px rgba(40,30,10,.28);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 96px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--ink); color: var(--paper-3); padding: 10px 14px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.pause { border: 1.5px solid var(--ink); background: var(--paper-3); color: var(--ink); border-radius: 9px; min-width: 38px; min-height: 34px; font: 700 11px var(--mono); }
html.paused *, html.paused *::before, html.paused *::after { animation-play-state: paused !important; }
body {
  margin: 0; color: var(--ink); font: 400 17px/1.6 var(--body); overflow-x: hidden;
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(var(--wrap), 100% - var(--gut) * 2); margin-inline: auto; }
.hand { font-family: var(--hand); font-weight: 400; }
mark, .hl {
  color: inherit; padding: 0 .12em; margin-inline: -.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(100deg, transparent .2em, var(--yellow) .2em, var(--yellow) calc(100% - .2em), transparent calc(100% - .2em)) 0 62% / 100% 52% no-repeat;
}
.kicker { font: 700 14px/1 var(--mono); color: var(--red-t); letter-spacing: .04em; text-transform: uppercase; }
.kicker.light { color: var(--yellow); }

/* ---------- BAR ---------- */
.bar {
  position: fixed; z-index: 60; top: 12px; left: 50%; transform: translateX(-50%);
  width: min(var(--wrap), 100% - 24px); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 16px; border-radius: 14px; background: rgba(251,248,241,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid var(--ink); box-shadow: 0 12px 30px -20px rgba(40,30,10,.45);
}
.brand { font: 700 17px/1 var(--disp); text-decoration: none; display: flex; align-items: center; gap: 8px; letter-spacing: -.01em; }
.brand small { font: 400 13px var(--mono); color: var(--mute); letter-spacing: 0; }
.b-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--red); display: inline-block; }
.bar nav { display: flex; gap: 2px; }
.bar nav a { text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 9px; }
.bar nav a:hover { background: var(--paper-2); }
.wa-pill {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; background: #15803d; color: #fff;
  font-weight: 700; font-size: 14.5px; padding: 9px 14px; border-radius: 10px; border: 1.5px solid var(--ink);
}
.wa-pill svg { width: 18px; height: 18px; }
.wa-pill:hover { filter: brightness(1.06); }
@media (max-width: 820px) { .bar nav, .brand small { display: none; } }

/* ---------- BUTTON ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 12px; text-decoration: none;
  font-weight: 700; font-size: 15.5px; border: 1.5px solid var(--ink); transition: transform .15s, box-shadow .15s; background: none;
}
.btn.ink { background: var(--ink); color: var(--paper-3); box-shadow: 4px 4px 0 var(--red); }
.btn.ghost { background: var(--paper-3); }
.btn:hover { transform: translate(-2px, -2px); }
.btn.ink:hover { box-shadow: 6px 6px 0 var(--red); }
.btn.ghost:hover { background: #fff; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* ================= HERO ================= */
.hero { position: relative; padding-top: 72px; overflow: hidden; }
.hero-in { position: relative; width: min(1440px, 100%); margin: 0 auto; height: clamp(700px, 100svh, 900px); }
.giant {
  position: absolute; left: max(4%, calc((100% - var(--wrap)) / 2)); top: 128px; margin: 0; z-index: 1; white-space: nowrap;
  font: 700 clamp(120px, 16.5vw, 250px)/.78 var(--disp); letter-spacing: -.03em; color: var(--ink);
}
.giant .l { display: inline-block; animation: drop .9s cubic-bezier(.2,1.4,.4,1) both; }
.giant .l:nth-child(1) { animation-delay: .05s; } .giant .l:nth-child(2) { animation-delay: .12s; }
.giant .l:nth-child(3) { animation-delay: .19s; } .giant .l:nth-child(4) { animation-delay: .26s; color: var(--red); }
.giant .l:nth-child(5) { animation-delay: .33s; }
@keyframes drop { from { transform: translateY(-120%) rotate(-8deg); opacity: 0; } }
.cutout { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); margin: 0; z-index: 2; height: 61%; animation: rise 1s .35s cubic-bezier(.2,.9,.2,1) both; }
.cutout img { height: 100%; width: auto; filter: drop-shadow(0 18px 30px rgba(40,30,10,.25)); }
@keyframes rise { from { transform: translate(-50%, 18%); opacity: 0; } }
.hero-hi { position: absolute; left: max(4%, calc((100% - var(--wrap)) / 2)); top: 78px; z-index: 3; margin: 0; font-size: 30px; color: var(--red); transform: rotate(-6deg); }
.arrow-d { width: 56px; height: 40px; display: block; margin: -2px 0 0 120px; color: var(--red); }
.hero-copy { position: absolute; left: max(4%, calc((100% - var(--wrap)) / 2)); bottom: 96px; width: min(380px, 30%); z-index: 3; }
.target { font: 700 13px/1.3 var(--mono); color: var(--red-t); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; }
.role { font: 600 23px/1.3 var(--disp); margin: 0 0 12px; letter-spacing: -.01em; }
.sub { font: 400 14px/1.5 var(--mono); color: var(--mute); margin: 0 0 20px; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }

.printer { position: absolute; right: max(4%, calc((100% - var(--wrap)) / 2)); top: 120px; width: 300px; z-index: 4; transform: rotate(2.5deg); }
.printer-slot { height: 28px; border-radius: 10px 10px 4px 4px; background: linear-gradient(#3a3733, #1e1c19); position: relative; box-shadow: 0 6px 12px rgba(0,0,0,.25); }
.printer-slot span { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 5px; border-radius: 3px; background: #0a0908; }
.receipt-clip { overflow: hidden; margin: -8px 12px 0; padding: 0 0 26px; }
.receipt {
  position: relative; background: var(--paper-3); padding: 18px 16px 30px; font: 400 13px/1.45 var(--mono); color: #2a2723;
  transform: translateY(-101%); box-shadow: 0 10px 20px -8px rgba(40,30,10,.3);
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 10px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 10px repeat-x;
}
.receipt.print { animation: print 2.6s .9s steps(26) forwards; }
@keyframes print { to { transform: translateY(0); } }
.r-head { text-align: center; display: grid; gap: 2px; }
.r-head b { font-size: 19px; letter-spacing: .12em; }
.r-head span { font-size: 11.5px; color: #6b655a; }
.r-rule { border-top: 1.5px dashed #9a9384; margin: 10px 0; }
.r-items { list-style: none; margin: 0; padding: 0; }
.r-items li, .r-row { display: flex; justify-content: space-between; gap: 8px; }
.r-items li span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-items li span:last-child, .r-row span:last-child { white-space: nowrap; }
.r-row.big { font-weight: 700; font-size: 15px; }
.r-foot { text-align: center; font-size: 11.5px; margin-top: 8px; color: #6b655a; }
.barcode { height: 34px; margin: 10px 10px 0; background: repeating-linear-gradient(90deg, #2a2723 0 2px, transparent 2px 4px, #2a2723 4px 5px, transparent 5px 8px, #2a2723 8px 11px, transparent 11px 12px); }
.stamp {
  position: relative; display: block; width: max-content; margin: 14px auto 0; font: 700 30px/1 var(--disp); color: var(--red); letter-spacing: .04em;
  border: 4px solid var(--red); border-radius: 8px; padding: 6px 12px 4px; text-align: center; transform: rotate(-16deg) scale(2.4); opacity: 0;
  mix-blend-mode: multiply;
}
.stamp small { display: block; font: 700 11px var(--mono); letter-spacing: .3em; }
.stamp.slam { animation: slam .45s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes slam { to { transform: rotate(-16deg) scale(1); opacity: .88; } }

.sticker {
  position: absolute; z-index: 5; transform: rotate(var(--r, 0deg)); user-select: none;
  box-shadow: var(--shadow); transition: box-shadow .2s;
}
.sticker.can-drag { cursor: grab; touch-action: none; }
.sticker.can-drag:active { cursor: grabbing; box-shadow: 0 30px 40px -16px rgba(40,30,10,.45); }
.s-commit { left: auto; right: 31%; top: 66%; width: 112px; height: 112px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--ink); display: grid; place-content: center; text-align: center; line-height: 1.05; }
.s-commit b { font: 700 38px/1 var(--disp); }
.s-commit span { font: 700 12px/1.15 var(--mono); }
.s-tag { position: relative; left: auto; top: auto; margin: 0 0 18px; width: max-content; display: flex; align-items: center; gap: 10px; background: var(--green); color: #f3eedf; font: 700 13px/1.25 var(--mono); padding: 9px 14px 9px 10px; border-radius: 10px; border: 2px dashed rgba(255,255,255,.45); outline: 2px solid var(--green); }
.s-tag img { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
.s-tag b { font-family: var(--disp); font-weight: 900; font-size: 15px; letter-spacing: .02em; }
.s-tag small { font: 400 11px var(--mono); opacity: .85; letter-spacing: .04em; }
.s-tag::before { content: ""; position: absolute; top: -9px; left: 50%; width: 30px; height: 8px; margin-left: -15px; border-radius: 4px 4px 0 0; background: #0f3a24; }

.tape-strip { position: relative; z-index: 6; background: var(--ink); color: var(--paper); transform: rotate(-1.2deg); margin: -34px -20px 0; padding: 13px 0; overflow: hidden; border-block: 2px solid var(--ink); }
.tape-track { display: flex; width: max-content; animation: tape 36s linear infinite; font: 700 15px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.tape-track span { padding-right: 34px; white-space: nowrap; }
.tape-track span::after { content: "✱"; color: var(--yellow); margin-left: 34px; }
@keyframes tape { to { transform: translateX(-50%); } }

@media (max-width: 1000px) {
  .hero-in { height: auto; display: flex; flex-direction: column; align-items: center; padding: 26px 0 70px; }
  .giant { position: relative; left: auto; top: auto; transform: none; font-size: 23vw; margin-top: 26px; letter-spacing: -.035em; }
  .cutout { position: relative; left: auto; transform: none; height: auto; width: min(70vw, 380px); margin-top: 2vw; animation-name: rise-m; aspect-ratio: 760 / 982; }
  .cutout img { width: 100%; height: auto; aspect-ratio: 760 / 982; }
  @keyframes rise-m { from { transform: translateY(14%); opacity: 0; } }
  .hero-hi { position: relative; left: auto; top: auto; align-self: flex-start; margin-left: 6vw; font-size: 26px; }
  .arrow-d { width: 52px; height: 40px; margin-left: 110px; margin-top: -4px; }
  .hero-copy { position: relative; left: auto; bottom: auto; width: auto; padding: 22px var(--gut) 0; margin-top: -40px; z-index: 4; background: linear-gradient(transparent, var(--paper) 40px); }
  .role { font-size: 21px; }
  .printer { position: relative; right: auto; top: auto; margin-top: 36px; width: min(320px, 88vw); }
  .s-commit { left: auto; right: 4%; top: 64vw; width: 88px; height: 88px; }
  .r-items, .r-items + .r-rule { display: none; }
  .s-commit b { font-size: 30px; }
}

/* ================= SECTION ================= */
.sec { padding: clamp(80px, 11vw, 150px) 0; position: relative; }
.sec-h { position: relative; margin-bottom: clamp(36px, 6vw, 70px); }
.sec-h h2, .demo h2, .tools h2, .about h2, .contact h2, .koneksi h2 {
  font: 700 clamp(40px, 6vw, 88px)/1 var(--disp); letter-spacing: -.022em; margin: 14px 0 0;
}
.sec-h .side { position: absolute; right: 0; bottom: 8px; margin: 0; font-size: 24px; line-height: 1.15; color: var(--red-t); transform: rotate(-4deg); text-align: right; }
@media (max-width: 860px) { .sec-h .side { position: static; margin-top: 14px; text-align: left; transform: rotate(-2deg); font-size: 21px; } }

/* ================= FEATURE SPREADS ================= */
.feat:last-child { padding-bottom: 0; }
.feat { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(40px, 6vw, 76px) 0; border-top: 2px solid var(--ink); }
.feat:nth-child(even) .f-vis { order: -1; }
.f-no { font: 700 13px var(--mono); color: var(--red-t); }
.f-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; font: 700 13.5px var(--mono); text-transform: uppercase; color: var(--mute); }
.st { display: inline-block; font: 700 12px/1 var(--mono); padding: 5px 8px 4px; border: 2px solid currentColor; border-radius: 4px; letter-spacing: .06em; text-transform: uppercase; }
.st.live { color: var(--green); } .st.beta { color: #1f6fb2; } .st.wip { color: #8a4a0c; }
[data-theme] .st { color: var(--ink); }
.f-title { font: 700 clamp(40px, 5.2vw, 72px)/.95 var(--disp); letter-spacing: -.022em; margin: 0 0 16px; }
.f-sum { font-size: 18px; color: var(--ink-2); margin: 0 0 22px; max-width: 34em; }
.f-nums { list-style: none; padding: 14px 16px; margin: 0 0 26px; background: var(--paper-3); font: 400 14.5px/1.5 var(--mono); box-shadow: var(--shadow); max-width: 440px; }
.f-nums li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line); padding: 4px 0; }
.f-nums li:last-child { border-bottom: 0; }
.f-nums b { font-weight: 700; white-space: nowrap; }
.f-vis { --rx: 0deg; --ry: 0deg; --tx: 0px; position: relative; min-height: 460px; border-radius: 22px; background: var(--paper-2); padding: 34px 24px 0; display: flex; align-items: flex-end; justify-content: center; gap: 14px; cursor: pointer; border: 1.5px solid var(--ink); box-shadow: var(--shadow); transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--tx), var(--tx)); transition: transform .35s cubic-bezier(.2,.9,.2,1), box-shadow .25s; isolation: isolate; }
.f-vis::before { content: ""; position: absolute; inset: 0; border-radius: 20px; z-index: -1; opacity: .5; background-image: radial-gradient(rgba(25,23,20,.18) 1px, transparent 1.3px); background-size: 16px 16px; }
.f-vis:hover { --tx: -3px; box-shadow: 0 2px 2px rgba(40,30,10,.1), 0 30px 50px -22px rgba(40,30,10,.45); }
.f-tab { position: absolute; top: -18px; left: 26px; background: var(--paper-3); border: 2px solid var(--ink); border-radius: 8px 8px 0 0; padding: 4px 14px; font: 700 13px var(--mono); }
.dev-phone { width: 34%; max-width: 210px; border: 7px solid #121110; border-bottom: 0; border-radius: 30px 30px 0 0; overflow: hidden; background: #121110; box-shadow: 0 20px 40px rgba(0,0,0,.35); aspect-ratio: 9 / 15.5; transition: transform .4s cubic-bezier(.2,.9,.2,1); }
.dev-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 22px 22px 0 0; }
.dev-phone:nth-child(2) { transform: translateY(-30px); }
.dev-phone:nth-child(3) { transform: translateY(-10px); }
.f-vis:hover .dev-phone:nth-child(1) { transform: translateY(-14px) rotate(-3deg); }
.f-vis:hover .dev-phone:nth-child(3) { transform: translateY(-22px) rotate(3deg); }
.dev-laptop { width: 92%; position: relative; align-self: flex-end; }
.dev-laptop .scr { border: 9px solid #121110; border-bottom-width: 14px; border-radius: 14px 14px 0 0; overflow: hidden; background: #121110; box-shadow: 0 20px 40px rgba(0,0,0,.35); }
.dev-laptop .scr img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; }
.f-vis .dev-laptop ~ .dev-phone { position: absolute; right: 16px; bottom: 0; width: 25%; transform: none; }
.anno { position: absolute; z-index: 3; font: 400 22px/1.1 var(--hand); color: var(--ink); background: var(--paper-3); padding: 8px 12px; border-radius: 4px; box-shadow: var(--shadow); white-space: pre-line; transform: rotate(var(--r)); }
.anno.a1 { left: -22px; top: 40px; --r: -5deg; }
@media (max-width: 900px) {
  .feat { grid-template-columns: 1fr; }
  .feat:nth-child(n) .f-vis { order: -1; margin-bottom: 8px; }
  .f-vis { min-height: 330px; padding: 30px 16px 0; }
  .feat .f-vis { order: -1; }
  .anno { font-size: 18px; }
  .anno.a1 { left: -6px; top: 18px; }
}

/* ================= DEMO BOT ================= */
.demo { background: var(--ink); color: var(--paper); }
.demo-grid { display: grid; grid-template-columns: 1fr 380px; gap: clamp(30px, 6vw, 90px); align-items: center; }
.demo h2 .tg { color: var(--tg); }
.demo .kicker { color: var(--yellow); }
.demo-copy p { color: #cfc7b6; font-size: 18px; max-width: 32em; }
.demo-copy .hand { color: var(--yellow); font-size: 21px; }
.demo-facts { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; align-items: baseline; }
.demo-facts li { display: contents; }
.demo-facts li { font: 400 15.5px var(--mono); color: #cfc7b6; }
.demo-facts b { display: inline-block; font: 700 26px var(--disp); color: var(--paper); }
.phone { position: relative; width: 100%; max-width: 380px; height: 690px; margin-inline: auto; border-radius: 46px; border: 12px solid #000; background: #dfe7d3; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 0 0 2px #444, 0 40px 80px -20px rgba(0,0,0,.6); }
.phone-notch { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 96px; height: 26px; border-radius: 20px; background: #000; z-index: 3; }
.tg-head { display: flex; align-items: center; gap: 10px; padding: 44px 14px 10px; background: #1b211c; color: #fff; }
.tg-head b { display: block; font-size: 15px; }
.tg-head small { font-size: 12px; color: #9fb5a6; }
.tg-ava { width: 38px; height: 38px; border-radius: 50%; background: var(--green); display: grid; place-items: center; font: 800 12px var(--body); border: 1.5px solid #3c8a5e; flex: none; }
.tg-body {
  flex: 1; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; scroll-behavior: smooth;
  background-color: #dfe7d3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23c3d0b6' stroke-width='1.4'%3E%3Ccircle cx='14' cy='16' r='6'/%3E%3Cpath d='M50 10l8 8m0-8l-8 8'/%3E%3Cpath d='M18 52c6-6 12 6 18 0'/%3E%3Crect x='54' y='50' width='12' height='12' rx='3'/%3E%3C/g%3E%3C/svg%3E");
}
.msg { max-width: 86%; padding: 7px 10px 6px; border-radius: 14px; font: 400 14px/1.4 var(--body); color: #111; box-shadow: 0 1px 1px rgba(0,0,0,.12); animation: pop .25s ease-out; position: relative; }
@keyframes pop { from { transform: translateY(8px) scale(.96); opacity: 0; } }
.msg.in { background: #fff; align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.out { background: #e1fec6; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg pre { margin: 4px 0; font: 400 12px/1.45 var(--mono); white-space: pre; overflow-x: auto; }
.msg .t { display: block; text-align: right; font-size: 10.5px; color: #5f6e5c; margin-top: 2px; }
.msg .photo { width: 190px; height: 120px; border-radius: 10px; margin-bottom: 4px; background: #f6f3ea repeating-linear-gradient(0deg, transparent 0 17px, #dcd5c2 17px 18px); position: relative; overflow: hidden; }
.msg .photo::after { content: attr(data-label); position: absolute; left: 10px; top: 12px; font: 700 11px var(--mono); padding: 4px 6px; border: 1.5px solid #555; background: #fff; }
.ikb { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 2px; align-self: flex-start; width: 86%; animation: pop .25s ease-out; }
.ikb button { background: rgba(30,60,40,.16); border: 0; border-radius: 8px; padding: 8px 4px; font: 600 12.5px var(--body); color: #1d3a26; }
.ikb button:hover { background: rgba(30,60,40,.26); }
.ikb button:disabled { opacity: .45; cursor: default; }
.typing { align-self: flex-start; background: #fff; border-radius: 14px; padding: 10px 12px; display: flex; gap: 4px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #8a9a87; animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { transform: translateY(-4px); opacity: .5; } }
.tg-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; background: #f4f6f1; border-top: 1px solid #d6dccd; }
.tg-quick button { flex: 1 1 45%; border: 1px solid #c8d1bf; background: #fff; border-radius: 10px; padding: 9px 6px; font: 600 12.5px var(--body); color: #1d3a26; }
.tg-quick button:hover { background: #eef4e8; }
.tg-quick button:disabled { opacity: .5; }
@media (max-width: 900px) { .demo-grid { grid-template-columns: 1fr; } .phone { height: 620px; transform: none; } }

/* ================= LACI: BENDA ================= */
.drawer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 4vw, 52px) clamp(20px, 3vw, 40px); align-items: start; }
.obj { position: relative; text-align: left; border: 0; padding: 0; background: none; color: var(--ink); transform: rotate(var(--r, 0deg)); transition: transform .3s cubic-bezier(.2,.9,.2,1); }
.obj:hover { transform: rotate(0deg) translateY(-8px); z-index: 2; }
.obj .o-t { display: block; font: 700 26px/1 var(--disp); letter-spacing: -.02em; margin: 0 0 6px; }
.obj .o-s { display: block; font-size: 14.5px; line-height: 1.45; margin: 0 0 12px; }
.obj .o-go { display: inline-block; margin-top: 12px; font: 700 13px var(--mono); border-bottom: 2px solid currentColor; }
.obj .o-rows { display: block; font: 400 13px/1.5 var(--mono); }
.obj .o-rows > span { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.obj .o-hd { display: block; }
/* tiket timbang */
.o-tiket { --r: -1.5deg; background: #fbfaf6; padding: 26px 20px 20px; box-shadow: var(--shadow); border: 1px solid #ddd6c4; }
.o-tiket::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: radial-gradient(circle at 6px 0, var(--paper) 5px, transparent 5.5px) 0 0 / 12px 10px repeat-x; }
.o-tiket .o-hd { font: 700 12px var(--mono); letter-spacing: .14em; border: 1.5px solid var(--ink); text-align: center; padding: 5px; margin-bottom: 14px; }
.o-tiket .o-rows > span { border-bottom: 1px solid #e3ddcc; padding: 3px 0; }
/* struk */
.o-struk { --r: 1.5deg; background: var(--paper-3); padding: 22px 20px 34px; font-family: var(--mono); width: 92%; margin-inline: auto; filter: drop-shadow(0 8px 10px rgba(40,30,10,.2));
  -webkit-mask: linear-gradient(#000,#000) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 10px repeat-x;
  mask: linear-gradient(#000,#000) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 10px repeat-x; }
.o-struk .o-hd { text-align: center; font-weight: 700; letter-spacing: .1em; border-bottom: 1.5px dashed #9a9384; padding-bottom: 8px; margin-bottom: 10px; }
.o-struk .o-t { font-family: var(--mono); font-size: 22px; text-align: center; }
/* slip bank */
.o-slip { --r: -1deg; background: #e6eef8; border: 1px solid #b8c9e0; padding: 0 0 18px; box-shadow: var(--shadow); overflow: hidden; }
.o-slip .o-hd { background: #1d4f91; color: #fff; font: 700 12px var(--mono); letter-spacing: .14em; padding: 9px 18px; display: flex; justify-content: space-between; }
.o-slip .o-hd i { font-style: normal; background: #f39200; color: #1d2a3a; padding: 0 6px; border-radius: 3px; }
.o-slip .o-body { display: block; padding: 16px 18px 0; }
.o-slip .o-rows > span { border-bottom: 1px solid #b8c9e0; padding: 4px 0; }
.o-slip > .o-go { margin: 12px 18px 0; }
/* lembar chord */
.o-chord { --r: 2deg; background-color: #fffdf8; padding: 22px 22px 20px 34px; box-shadow: var(--shadow); border-left: 2px solid #f0b4a8; background-image: repeating-linear-gradient(transparent 0 27px, #d9e5f0 27px 28px); background-position: 0 14px; }
.o-chord .o-t { font-family: var(--hand); font-weight: 400; font-size: 32px; }
.o-chord .ch { font: 700 13px var(--mono); color: var(--red); display: block; letter-spacing: .3em; }
/* kertas dot-matrix */
.o-dot { --r: -2deg; background: repeating-linear-gradient(#f5f7ef 0 26px, #dfeccf 26px 52px); padding: 20px 40px; box-shadow: var(--shadow); font-family: var(--mono); }
.o-dot::before, .o-dot::after { content: ""; position: absolute; top: 0; bottom: 0; width: 22px; background: radial-gradient(circle, var(--paper) 4px, transparent 4.5px) center 6px / 22px 20px repeat-y; border-color: #c9cfbd; border-style: dashed; }
.o-dot::before { left: 0; border-width: 0 1px 0 0; } .o-dot::after { right: 0; border-width: 0 0 0 1px; }
.o-dot .o-t { font-family: var(--mono); font-size: 21px; text-transform: uppercase; }
/* sticky note */
.o-sticky { --r: 3deg; background: #ffe56b; padding: 28px 22px 24px; box-shadow: 0 1px 1px rgba(0,0,0,.1), 8px 18px 22px -12px rgba(60,40,0,.45); font-family: var(--hand); }
.o-sticky::before { content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 90px; height: 24px; background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.06); }
.o-sticky .o-t { font-family: var(--hand); font-weight: 400; font-size: 32px; }
.o-sticky .o-s, .o-sticky .o-rows { font-family: var(--hand); font-size: 19px; }
@media (max-width: 960px) { .drawer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .drawer { grid-template-columns: 1fr; } .obj { max-width: 420px; margin-inline: auto; width: 100%; } }

/* ================= PAPAN ALAT ================= */
.tools { background: var(--paper-2); border-block: 2px solid var(--ink); overflow: clip; }
.tools-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.tools p { color: var(--ink-2); font-size: 17px; }
.key-info { background: var(--paper-3); border: 1.5px solid var(--ink); border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow); min-height: 176px; margin: 22px 0 14px; }
.key-info .ki-k { font: 700 12.5px var(--mono); color: var(--red-t); text-transform: uppercase; }
.key-info .ki-n { font: 700 30px/1.05 var(--disp); margin: 6px 0 8px; letter-spacing: -.02em; }
.key-info p { margin: 0 0 10px; font-size: 15px; }
.key-info .ki-u { font: 400 13px var(--mono); color: var(--mute); }
.mute { display: block; margin: 22px 0 0 auto; border: 1.5px solid var(--ink); background: var(--paper-3); border-radius: 9px; font: 700 13px var(--mono); color: var(--ink); padding: 8px 12px; min-height: 40px; }
.mute[aria-pressed="false"] { text-decoration: line-through; color: var(--mute); }
.kb-wrap { position: relative; perspective: 1400px; padding-bottom: 30px; }
.kb {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 18px; border-radius: 22px;
  background: linear-gradient(#34312b, #22201c); box-shadow: inset 0 2px 0 rgba(255,255,255,.08), 0 30px 50px -20px rgba(40,30,10,.6), 0 0 0 2px var(--ink);
  transform: rotateX(24deg); transform-style: preserve-3d;
}
.key {
  --c: #ece6d6; --t: #2b2823; --d: color-mix(in srgb, var(--c) 60%, #000);
  aspect-ratio: 1; border: 0; border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 88%, #fff), var(--c));
  color: var(--t); box-shadow: 0 7px 0 var(--d), 0 9px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5);
  display: grid; place-content: center; text-align: center; gap: 4px; padding: 4px; transform: translateY(-4px);
  transition: transform .08s, box-shadow .08s;
}
.key b { font: 700 clamp(14px, 2vw, 22px)/1 var(--disp); }
.key small { font: 700 clamp(8.5px, .85vw, 10px)/1.1 var(--mono); opacity: .8; }
.key:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--d), 0 6px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5); }
.key.on, .key:active { transform: translateY(3px); box-shadow: 0 0 0 var(--d), 0 2px 3px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3); }
.key.on { box-shadow: 0 0 0 3px var(--yellow), 0 0 0 5px var(--ink); }
@media (max-width: 900px) { .tools-grid { grid-template-columns: 1fr; } .kb { transform: rotateX(16deg); gap: 7px; padding: 12px; } .key small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* ================= CARA KERJA ================= */
.cara-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.clipboard { position: relative; background: #a8784a; border-radius: 18px; padding: 46px 22px 22px; box-shadow: var(--shadow), inset 0 0 0 2px rgba(0,0,0,.15); transform: rotate(-1deg);
  background-image: repeating-linear-gradient(95deg, rgba(0,0,0,.04) 0 3px, transparent 3px 9px); }
.clip { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 150px; height: 50px; border-radius: 10px 10px 14px 14px; background: linear-gradient(#d9d9d6, #8e8e8a); box-shadow: 0 4px 6px rgba(0,0,0,.3), inset 0 2px 0 #fff; }
.clip::after { content: ""; position: absolute; left: 50%; top: 9px; transform: translateX(-50%); width: 40px; height: 12px; border-radius: 8px; background: #6c6c68; }
.paper { background-color: var(--paper-3); padding: 26px 26px 20px 30px; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.lined { background-image: repeating-linear-gradient(transparent 0 31px, #d9e5f0 31px 32px); }
.paper h3 { font: 400 34px/1 var(--hand); margin: 0 0 18px; color: var(--ink); }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { position: relative; padding: 0 0 18px 50px; font-size: 16px; line-height: 1.5; }
.checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border: 2px solid var(--ink); border-radius: 4px; background: #fff; }
.checks li::after { content: ""; position: absolute; left: 4px; top: -6px; width: 32px; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M3 16c4 3 7 7 9 11C16 16 22 7 30 2' fill='none' stroke='%23d93a26' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; clip-path: inset(0 100% 0 0); transition: clip-path .5s cubic-bezier(.6,0,.3,1); transition-delay: calc(var(--i, 0) * 260ms); }
.checks.done li::after { clip-path: inset(0 0 0 0); }
.notes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.notes-t { grid-column: 1 / -1; margin: 0; font: 700 13px var(--mono); color: var(--red-t); text-transform: uppercase; letter-spacing: .06em; }
.postit { font: 400 19px/1.25 var(--hand); padding: 18px 16px 22px; min-height: 150px; transform: rotate(var(--r)); box-shadow: 0 1px 1px rgba(0,0,0,.08), 6px 14px 18px -10px rgba(60,40,0,.4); transition: transform .25s; }
.postit:hover { transform: rotate(0) scale(1.03); }
.postit code { font: 700 15px var(--mono); }
.postit.y { background: #ffe56b; } .postit.p { background: #ffc4d0; } .postit.b { background: #bfe3ff; } .postit.g { background: #c8f0b4; }
@media (max-width: 900px) { .cara-grid { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .notes { grid-template-columns: 1fr; } .postit { min-height: 0; } }

/* ================= TENTANG ================= */
.about-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 90px); align-items: start; }
.polaroid { position: sticky; top: 100px; margin: 0; background: #fff; padding: 14px 14px 18px; box-shadow: var(--shadow); transform: rotate(var(--r)); }
.polaroid img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 30%; }
.polaroid figcaption { font-size: 25px; text-align: center; margin-top: 12px; }
.tape { position: absolute; width: 110px; height: 30px; background: rgba(240,225,170,.75); box-shadow: 0 1px 2px rgba(0,0,0,.1); z-index: 2; }
.t1 { top: -12px; left: -20px; transform: rotate(-24deg); }
@media (max-width: 860px) { .t1 { left: -4px; } .t2 { right: -6px; } } .t2 { top: -10px; right: -24px; transform: rotate(28deg); }
.about-copy p { font-size: 18px; color: var(--ink-2); max-width: 36em; }
.about h2 { font-size: clamp(34px, 4vw, 56px); margin-bottom: 24px; }
#cara { padding-bottom: clamp(40px, 6vw, 80px); }
.badges { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.badges li { font: 700 13px var(--mono); border: 2px solid var(--ink); padding: 7px 10px; border-radius: 6px; background: var(--paper-3); }
.badges a { text-decoration: none; } .badges a:hover { text-decoration: underline; }
.exp { background: var(--paper-3); padding: 18px 22px 8px; margin: 28px 0 22px; box-shadow: var(--shadow); border-radius: 4px; }
.exp h3 { font: 700 13px var(--mono); color: var(--red-t); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }
.exp dl { margin: 0; }
.exp dl div { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 10px 0; border-top: 1px dashed var(--line); }
.exp dl div:first-child { border-top: 0; }
.exp dt { font: 400 13px/1.5 var(--mono); color: var(--mute); }
.exp dd { margin: 0; font-size: 15.5px; line-height: 1.45; }
@media (max-width: 560px) { .exp dl div { grid-template-columns: 1fr; gap: 2px; } }
@media (max-width: 860px) { .about-grid { grid-template-columns: minmax(0, 1fr); } .polaroid { position: relative; top: 0; max-width: 340px; margin-inline: auto; } }

/* ================= KONTAK ================= */
.contact { background: var(--ink); color: var(--paper); padding: clamp(90px, 12vw, 150px) 0 30px; position: relative; overflow: hidden; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: clamp(36px, 6vw, 80px); align-items: center; }
.contact h2 { font-size: clamp(64px, 9.5vw, 150px); line-height: 1; margin: 12px 0 .3em; }
.contact p { color: #cfc7b6; font-size: 18px; max-width: 30em; }
.c-actions { display: grid; margin: 28px 0 22px; border-top: 1.5px solid #4a463e; }
.c-big { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; text-decoration: none; padding: 16px 0; border-bottom: 1.5px solid #4a463e; font: 650 clamp(20px, 2.8vw, 34px)/1.1 var(--disp); transition: color .2s, padding .2s; word-break: break-word; }
.c-big small { font: 700 13px var(--mono); color: #8f877a; text-transform: uppercase; letter-spacing: .08em; flex: none; }
.c-big:hover { color: var(--yellow); padding-left: 10px; }
.c-big.wa { color: #4fdc86; }
.c-mini { display: flex; flex-wrap: wrap; gap: 22px; font: 700 14px var(--mono); }
.c-mini a { color: var(--paper); }
.card-scene { perspective: 1200px; display: grid; place-items: center; }
.namecard { position: relative; width: min(470px, 100%); aspect-ratio: 1.6; border: 0; padding: 0; background: none; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3,1.3,.4,1); }
.namecard.flip { transform: rotateY(180deg); }
.nc-face { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; text-align: left; box-shadow: 0 30px 50px -20px rgba(0,0,0,.7); }
.nc-front { background: var(--paper-3); color: var(--ink); }
.nc-photo { width: 38%; height: 100%; object-fit: cover; object-position: 50% 30%; flex: none; }
.nc-body { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; padding: clamp(16px, 4vw, 24px) clamp(16px, 4vw, 24px) clamp(14px, 3.4vw, 20px); }
.nc-hint { position: absolute; right: clamp(14px, 3.4vw, 20px); top: clamp(14px, 3.4vw, 18px); font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.nc-name { margin-top: clamp(24px, 6vw, 34px); font: 700 clamp(20px, 5.4vw, 27px)/1.02 var(--disp); letter-spacing: -.015em; }
.nc-role { font: 400 12px var(--mono); color: var(--mute); margin-top: 8px; }
.nc-meta { margin-top: auto; padding-top: 10px; border-top: 1px dashed #b3ab98; display: grid; gap: 2px; font: 400 clamp(10.5px, 2.8vw, 12px)/1.35 var(--mono); color: var(--ink-2); }
.nc-back { background: #191714; color: #efe9dc; transform: rotateY(180deg); align-items: center; gap: clamp(16px, 4vw, 26px); padding: clamp(18px, 5vw, 30px); }
.nc-qr { width: clamp(96px, 26vw, 128px); aspect-ratio: 1; flex: none; background: #fff; padding: 7px; border-radius: 8px; }
.nc-qr img, .nc-qr canvas { width: 100% !important; height: 100% !important; }
.nc-back-txt { display: grid; gap: 4px; min-width: 0; }
.nc-scan { font: 400 clamp(22px, 5.6vw, 30px)/1.02 var(--serif); margin-bottom: 8px; }
.nc-line { font: 400 clamp(10.5px, 2.8vw, 12px) var(--mono); color: #b9b1a1; overflow-wrap: anywhere; }
.foot { background: var(--ink); color: #cfc7b6; padding: clamp(60px, 8vw, 96px) max(var(--gut), calc((100% - var(--wrap)) / 2)) 26px; border-top: 1px solid #3a372f; }
.ft-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-bottom: clamp(36px, 5vw, 56px); border-bottom: 1px solid #3a372f; }
.ft-say { margin: 0; font: 400 clamp(34px, 4.6vw, 64px)/1.02 var(--serif); color: #efe9dc; letter-spacing: -.01em; }
.ft-say em { color: var(--yellow); }
.ft-up, .ft-col a, .ft-col button { color: #cfc7b6; text-decoration: none; font: 400 15px/1.2 var(--body); background: none; border: 0; padding: 6px 0; min-height: 32px; text-align: left; cursor: pointer; transition: color .2s; }
.ft-up:hover, .ft-col a:hover, .ft-col button:hover { color: #fff; }
.ft-cols { display: grid; grid-template-columns: repeat(4, max-content) 1fr; column-gap: clamp(40px, 7vw, 110px); row-gap: 32px; padding: clamp(36px, 5vw, 52px) 0 0; }
.ft-cols .ft-up { justify-self: end; align-self: start; }
.ft-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ft-h { margin: 0 0 10px; font: 700 11.5px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--yellow); }
.ft-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 18px; font: 400 12.5px var(--mono); color: #8f877a; }
@media (max-width: 700px) { .ft-cols { grid-template-columns: 1fr 1fr; } .ft-cols .ft-up { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* ================= DETAIL ================= */
dialog.detail { width: min(1000px, 100% - 20px); max-height: calc(100svh - 20px); padding: 0; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); color: var(--ink); overflow: auto; overscroll-behavior: contain; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
dialog.detail::backdrop { background: rgba(25,23,20,.72); }
dialog.detail[open] { animation: pop .3s ease-out; }
.d-close { position: sticky; top: 12px; float: right; margin: 12px 12px 0 0; z-index: 3; width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--ink); background: var(--paper-3); font-size: 18px; font-weight: 700; }
.d-in { padding: clamp(20px, 4vw, 44px); }
.d-band { height: 12px; background: var(--c, var(--green)); margin: calc(-1 * clamp(20px, 4vw, 44px)) calc(-1 * clamp(20px, 4vw, 44px)) 24px; }
.d-in h3 { font: 700 clamp(40px, 6vw, 72px)/.95 var(--disp); letter-spacing: -.022em; margin: 10px 0 14px; }
.d-sum { font-size: 18px; color: var(--ink-2); max-width: 44em; margin: 0 0 22px; }
.d-facts { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; margin: 0 0 26px; background: var(--paper-3); }
.d-facts div { padding: 12px 14px; border-right: 1.5px solid var(--line); }
.d-facts div:last-child { border-right: 0; }
.d-facts dt { font: 700 11.5px var(--mono); color: var(--mute); text-transform: uppercase; }
.d-facts dd { margin: 6px 0 0; font-size: 15px; font-weight: 600; }
.d-gal { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 14px; margin-bottom: 22px; scroll-snap-type: x mandatory; }
.d-gal figure { margin: 0; flex: none; scroll-snap-align: start; }
.d-gal img { height: 400px; width: auto; border-radius: 14px; border: 2px solid var(--ink); }
.d-gal img.dk { height: 280px; }
.d-gal figcaption { font: 400 18px var(--hand); margin-top: 6px; }
.d-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.d-cols h4 { font: 700 13px var(--mono); color: var(--red-t); text-transform: uppercase; margin: 0 0 10px; }
.d-cols p, .d-cols li { color: var(--ink-2); }
.d-cols ul { margin: 0; padding-left: 18px; }
.d-cols li { margin-bottom: 6px; }
.d-ai { grid-column: 1 / -1; background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 10px; padding: 16px 18px; }
.d-ai h4 { color: var(--ink); }
.d-ai p { margin: 0; color: var(--ink); }
.d-nums { display: flex; flex-wrap: wrap; gap: 26px; margin: 26px 0; }
.d-nums b { display: block; font: 700 40px/1 var(--disp); }
.d-nums span { font: 400 13px var(--mono); color: var(--mute); }
.d-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; border-top: 2px solid var(--ink); padding-top: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.chips li { font: 700 12px var(--mono); padding: 6px 9px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--paper-3); }
.d-note { font: 400 13px var(--mono); color: var(--mute); }
@media (max-width: 700px) { .d-facts { grid-template-columns: 1fr 1fr; } .d-facts div:nth-child(2) { border-right: 0; } .d-facts div:nth-child(-n+2) { border-bottom: 1.5px solid var(--line); } .d-cols { grid-template-columns: 1fr; } .d-gal img { height: 330px; } .d-gal img.dk { height: 190px; } }

/* ================= MUNCUL ================= */
.rv { opacity: 0; translate: 0 30px; transition: opacity .7s ease, translate .7s cubic-bezier(.2,.9,.2,1); }
.rv.in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .rv { opacity: 1; translate: none; }
  .receipt { transform: none; } .stamp { opacity: .88; transform: rotate(-16deg); }
  html { scroll-behavior: auto; }
}


/* ================= v3: STATUS, TEMA, LAMPU, KURSOR, LOADER ================= */
.live { display: block; margin: 0 0 12px; font: 700 13px/1.5 var(--mono); color: var(--ink-2); }
.live .pulse { display: inline-block; vertical-align: 1px; margin-right: 8px; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,.6); animation: pulse 1.8s infinite; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
.tg-quick button.wide { flex-basis: 100%; background: #1b211c; color: #fff; border-color: #1b211c; }
.theme-cycle { display: none; border: 1.5px solid var(--ink); background: var(--paper-3); color: var(--ink); border-radius: 9px; font-size: 18px; line-height: 1; min-width: 44px; min-height: 44px; margin-left: auto; }

.tg-quick button.wide:hover { background: #2b352d; }

.themes { display: flex; border: 1.5px solid var(--ink); border-radius: 9px; overflow: hidden; font: 700 12.5px var(--mono); margin-left: auto; }
.themes button { border: 0; background: none; padding: 7px 10px; color: var(--ink); }
.themes button + button { border-left: 1.5px solid var(--ink); }
.themes button:focus-visible { outline-offset: -4px; }
.themes button[aria-pressed="true"] { background: var(--ink); color: var(--paper-3); }
@media (max-width: 560px) { .wa-pill span { display: none; } .wa-pill { padding: 9px 12px; } }

.lamp, .scan { position: fixed; inset: 0; pointer-events: none; z-index: 55; display: none; }
.cursor { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 2px solid var(--ink); border-radius: 50%; display: none; place-items: center; transition: width .25s, height .25s, margin .25s, background .25s, border-color .25s; mix-blend-mode: normal; }
.cursor span { font: 700 11px var(--mono); color: var(--paper-3); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cursor.big { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: rgba(25,23,20,.82); }
.cursor.big span { opacity: 1; }
@media (pointer: fine) { .cursor { display: grid; opacity: 0; } .cursor.on { opacity: 1; } }

.loader { position: fixed; inset: 0; z-index: 200; background: var(--ink); color: var(--paper); display: none; place-items: center; }
html.loading .loader { display: grid; }
.loader.go { animation: ldup .6s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes ldup { to { transform: translateY(-100%); } }
.ld-in { display: grid; gap: 10px; width: min(300px, 80vw); font: 700 14px var(--mono); letter-spacing: .14em; }
.ld-in span { font: 700 88px/1 var(--disp); letter-spacing: -.04em; color: var(--yellow); }
.ld-in i { display: block; height: 4px; background: #3a352c; }
.ld-in em { display: block; height: 100%; width: 0; background: var(--red); }

/* smooth scroll (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* animasi berbasis scroll */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1001px) {
    .giant-row { display: inline-block; animation: giantOut linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
    @keyframes giantOut { to { transform: translateY(-120px) scale(.92); opacity: .15; filter: blur(3px); } }
    .printer { animation: printerOut linear both; animation-timeline: scroll(root); animation-range: 0 800px; }
    @keyframes printerOut { to { translate: 0 160px; rotate: 9deg; } }
  }
}

/* ---------- MODE LEMBUR (gelap + lampu meja) ---------- */
[data-theme="lembur"] {
  --paper: #13110e; --paper-2: #1b1915; --ink: #efe9dc; --ink-2: #cfc7b6; --mute: #a49b88; --line: #3a352c; --red-t: #ff7a5c;
  color-scheme: dark;
}
[data-theme="lembur"] body { background-image: none; }
[data-theme="lembur"] .lamp { display: block; background:
  radial-gradient(380px circle at var(--mx, 70%) var(--my, 30%), rgba(255,196,120,.13), transparent 60%),
  radial-gradient(1000px circle at var(--mx, 50%) var(--my, 45%), transparent 30%, rgba(0,0,0,.22) 80%); }
[data-theme="lembur"] :is(.bar, .receipt, .obj, .postit, .paper, .polaroid, .f-nums, .anno, .key-info, .exp, .badges li, .nc-front, .nc-back, .mute, .theme-cycle, .pause, .d-facts, .chips li, .btn.ghost, .d-ai, .f-tab, .d-close, .sticker) {
  --ink: #191714; --ink-2: #3d3a34; --mute: #5b5548; --line: #d3cab6; --red-t: #a8291a; color: #191714;
}
[data-theme="lembur"] .bar { background: rgba(251,248,241,.9); }
[data-theme="lembur"] .namecard .nc-back { color: #efe9dc; }
[data-theme="lembur"] .btn.ink { background: var(--yellow); color: #191714; border-color: var(--yellow); }
[data-theme="lembur"] .hero-copy { background: none; }
[data-theme="lembur"] .cutout img { filter: drop-shadow(0 0 40px rgba(255,196,120,.18)) brightness(.95); }
[data-theme="lembur"] .tools, [data-theme="lembur"] .demo, [data-theme="lembur"] .contact { background: #0d0c0a; }
[data-theme="lembur"] .tape-strip { background: var(--yellow); color: #191714; }
[data-theme="lembur"] .tape-track span::after { color: var(--red); }
[data-theme="lembur"] .cursor { border-color: var(--yellow); }
[data-theme="lembur"] .cursor.big { background: var(--yellow); }
[data-theme="lembur"] .cursor span { color: #191714; }
[data-theme="lembur"] .hl, [data-theme="lembur"] mark { color: #191714; }
[data-theme="lembur"] .live { color: var(--ink-2); }
@media (max-width: 1000px) { [data-theme="lembur"] .hero-copy { background: none; } }

/* ---------- MODE TERMINAL (layar hijau) ---------- */
[data-theme="terminal"] {
  --paper: #040a05; --paper-2: #071209; --paper-3: #071209; --ink: #57ff94; --ink-2: #3fd977; --mute: #2fa05a; --line: #12391f;
  --red: #ffb000; --red-t: #ffb000; --yellow: #57ff94; --green: #0b2a14; --tg: #57ff94;
  --disp: var(--mono); --body: var(--mono); --hand: var(--mono);
  color-scheme: dark;
}
[data-theme="terminal"] body { background-image: none; text-shadow: 0 0 5px rgba(87,255,148,.45); }
[data-theme="terminal"] .scan { display: block; background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.28) 2px 4px), radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0,0,0,.6)); animation: flick 4s infinite steps(1); }
@keyframes flick { 0%, 96% { opacity: 1; } 97% { opacity: .85; } 98% { opacity: 1; } }
[data-theme="terminal"] :is(.receipt, .obj, .postit, .paper, .polaroid, .f-nums, .anno, .key-info, .exp, .badges li, .nc-front, .nc-back, .d-facts, .chips li, .btn, .d-ai, .f-tab, .d-close, .sticker, .bar, .clipboard, .phone, .msg, .tg-quick button, .ikb button, .f-vis, .o-slip .o-hd, .wa-pill, dialog.detail, .key, .kb, .typing) {
  background: #050d07 !important; color: var(--ink) !important; border-color: var(--ink) !important; box-shadow: none !important; outline-color: var(--ink) !important;
}
[data-theme="terminal"] :is(.obj, .postit, .paper, .key-info, .exp, .msg, .f-vis, .anno, .sticker, .receipt, .polaroid) { border: 1px solid var(--ink) !important; }
[data-theme="terminal"] :is(.receipt, .o-struk) { -webkit-mask: none; mask: none; filter: none; }
[data-theme="terminal"] .o-dot::before, [data-theme="terminal"] .o-dot::after, [data-theme="terminal"] .o-tiket::before, [data-theme="terminal"] .o-sticky::before, [data-theme="terminal"] .tape, [data-theme="terminal"] .clip, [data-theme="terminal"] .phone-notch { display: none; }
[data-theme="terminal"] img { filter: grayscale(1) sepia(1) hue-rotate(70deg) saturate(2.6) brightness(.85) contrast(1.1) !important; }
[data-theme="terminal"] .giant { font-weight: 700; letter-spacing: -.06em; }
[data-theme="terminal"] .giant .l:nth-child(4) { color: var(--ink); }
[data-theme="terminal"] .giant-row::after { content: "▍"; animation: blink 1s steps(1) infinite; }
[data-theme="terminal"] .key, [data-theme="terminal"] .kb { border: 1px solid var(--ink) !important; }
@keyframes blink { 50% { opacity: 0; } }
[data-theme="terminal"] .f-no { -webkit-text-stroke: 1px var(--ink); }
[data-theme="terminal"] .stamp { color: var(--red); border-color: var(--red); mix-blend-mode: normal; }
[data-theme="terminal"] .hl, [data-theme="terminal"] mark { background: var(--ink); color: #040a05; text-shadow: none; }
[data-theme="terminal"] .tape-strip, [data-theme="terminal"] .demo, [data-theme="terminal"] .contact, [data-theme="terminal"] .tools { background: #040a05; border-color: var(--ink); }
[data-theme="terminal"] .tg-head, [data-theme="terminal"] .o-slip .o-hd i { background: #0b2a14; color: var(--ink); }
[data-theme="terminal"] .tg-body { background: #040a05; }
[data-theme="terminal"] .checks li::before { background: transparent; border-color: var(--ink); }
[data-theme="terminal"] .themes button[aria-pressed="true"] { background: var(--ink) !important; color: #040a05 !important; }
[data-theme="terminal"] .cursor { border-color: var(--ink); }
[data-theme="terminal"] .cursor.big { background: var(--ink); }
[data-theme="terminal"] .cursor span { color: #040a05; text-shadow: none; }
[data-theme="terminal"] .cutout img { filter: grayscale(1) sepia(1) hue-rotate(70deg) saturate(3) brightness(.9) contrast(1.2) drop-shadow(0 0 30px rgba(87,255,148,.25)) !important; }
[data-theme="terminal"] .o-chord, [data-theme="terminal"] .lined, [data-theme="terminal"] .o-dot { background-image: none !important; }

/* warna teks bagian gelap dikunci agar tidak ikut tema */
.demo, .contact, .contact h2, .demo-facts b, .c-mini a { color: #efe9dc; }
.tape-strip { color: #efe9dc; }
.demo .btn.ink { background: #efe9dc; color: #191714; border-color: #efe9dc; box-shadow: 4px 4px 0 var(--red); }
[data-theme="terminal"] :is(.demo, .contact, .contact h2, .demo-copy p, .demo-facts b, .demo-facts li, .contact p, .c-big, .c-mini a, .tape-strip, .foot) { color: var(--ink); }
[data-theme="terminal"] .demo h2 .tg { color: var(--ink); }
[data-theme="lembur"] .tape-strip { color: #191714; }
@media (pointer: coarse) {
  [data-theme="lembur"] .lamp { background:
    radial-gradient(70vmax circle at 50% 40%, rgba(255,196,120,.08), transparent 60%),
    radial-gradient(90vmax circle at 50% 40%, transparent 45%, rgba(0,0,0,.45) 90%); }
}
[data-theme="lembur"] .s-tag { color: #f3eedf; }
[data-theme="lembur"] .s-tg { color: #fff; }


/* ================= v4 ================= */
.lang { border: 1.5px solid var(--ink); background: var(--paper-3); color: var(--ink); border-radius: 9px; font: 700 12.5px var(--mono); padding: 7px 10px; }
.lang:hover { background: var(--ink); color: var(--paper-3); }
[data-theme="lembur"] .lang { --ink: #191714; color: #191714; }
.strike { position: relative; color: var(--mute); }
.strike::after { content: ""; position: absolute; left: -3%; right: -3%; top: 52%; height: .11em; background: var(--red); border-radius: 4px; transform: rotate(-3deg); }

/* --- §2 Dulu ⟷ Sekarang --- */
.dampak { background: var(--paper-2); border-block: 2px solid var(--ink); }
.ds-head { display: grid; justify-items: start; gap: 18px; }
.ds-head h2 { margin-top: 0; }
.ds-toggle { display: inline-flex; align-items: center; gap: 12px; border: 2px solid var(--ink); background: var(--paper-3); border-radius: 999px; padding: 8px 16px; font: 700 14px var(--mono); text-transform: uppercase; box-shadow: var(--shadow); color: var(--ink); }
.ds-toggle i { position: relative; width: 50px; height: 26px; border-radius: 99px; background: var(--paper-2); border: 2px solid var(--ink); }
.ds-toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--red); transition: transform .35s cubic-bezier(.3,1.4,.5,1), background .3s; }
.ds-toggle[aria-checked="true"] i::after { transform: translateX(24px); background: #16a34a; }
.ds-toggle span { color: #6f685b; text-decoration: line-through 2px; text-decoration-color: transparent; transition: color .3s; }
.ds-toggle span:first-child, .ds-toggle[aria-checked="true"] span:last-child { color: var(--ink); }
.ds-toggle[aria-checked="true"] span:first-child { color: #6f685b; text-decoration-color: var(--red); }
.ds-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; perspective: 1400px; }
.ds-card { position: relative; display: grid; min-height: 200px; cursor: pointer; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3,1.25,.4,1); }
.ds-card.flip { transform: rotateY(180deg); }
.ds-face { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 18px; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ds-old { background: #f6f1e5; border: 1.5px solid #cfc5ae; color: #4a453c; box-shadow: var(--shadow);
  background-image: linear-gradient(118deg, transparent 47%, rgba(0,0,0,.05) 49%, transparent 52%), linear-gradient(62deg, transparent 58%, rgba(0,0,0,.045) 60%, transparent 63%), linear-gradient(170deg, transparent 30%, rgba(255,255,255,.6) 32%, transparent 36%); transform: rotate(-.6deg); }
.ds-old .ds-txt { font: 400 22px/1.2 var(--hand); }
.ds-old .ds-lbl { font: 700 12px var(--mono); color: var(--red-t); letter-spacing: .12em; }
.ds-x { position: absolute; right: 14px; bottom: 12px; width: 46px; height: 46px; fill: none; stroke: var(--red); stroke-width: 6; stroke-linecap: round; opacity: .75; }
.ds-new { background: #191714; color: #efe9dc; transform: rotateY(180deg); border: 2px solid #191714; }
.ds-new .ds-lbl { font: 700 12px var(--mono); color: #4ade80; letter-spacing: .12em; }
.ds-new .ds-txt { font: 650 19px/1.25 var(--disp); }
.ds-tag { margin-top: auto; font: 700 11.5px var(--mono); color: #191714; background: var(--yellow); align-self: flex-start; padding: 4px 8px; border-radius: 4px; }
@media (max-width: 1000px) { .ds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ds-grid { grid-template-columns: 1fr; } .ds-card { min-height: 0; } }
[data-theme="lembur"] :is(.ds-old, .ds-toggle) { --ink: #191714; --red-t: #a8291a; color: #191714; }
[data-theme="lembur"] .ds-old { color: #4a453c; }
[data-theme="terminal"] :is(.ds-old, .ds-new, .ds-toggle) { background: #050d07 !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; box-shadow: none !important; background-image: none !important; }
[data-theme="terminal"] .ds-tag { background: var(--ink); color: #040a05; text-shadow: none; }
[data-theme="terminal"] .s-tag img { filter: grayscale(1) sepia(1) hue-rotate(70deg) saturate(3) brightness(.9) !important; }

[data-theme="terminal"] :is(.r-head span, .r-foot, .msg .t, .exp dt) { color: var(--ink-2) !important; }
[data-theme="lembur"] .foot, [data-theme="terminal"] .foot { background: #0d0c0a; }

/* bar responsif (ditaruh paling akhir agar tidak tertimpa) */
@media (max-width: 700px) { .themes { display: none; } .theme-cycle { display: inline-grid; place-items: center; } .lang { min-height: 44px; min-width: 44px; } .wa-pill { min-height: 44px; } .bar { gap: 8px; } }
@media (max-width: 400px) { .bar { gap: 6px; padding-left: 12px; } .brand { font-size: 15px; } .theme-cycle { min-width: 40px; } .pause { min-width: 34px; } }
.foot-themes button[aria-pressed="true"] { color: var(--yellow); }
.foot-themes button[aria-pressed="true"]::after { content: " ●"; font-size: 9px; vertical-align: 2px; }
[data-theme="lembur"] .ds-new { background: #24211c; border-color: #6b6352; }
.about h2, .exp dd, .badges li { overflow-wrap: anywhere; }
.badges li { max-width: 100%; }

/* ================= v6 ================= */
/* detail: alur bernomor + integrasi */
.d-flow-h { font: 700 12.5px var(--mono); color: var(--red-t); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; display: flex; justify-content: space-between; }
.d-flow-h span { color: var(--mute); }
.d-gal figcaption b { font: 700 12px var(--mono); color: var(--red-t); margin-right: 4px; }
.d-gal figcaption { max-width: 300px; }
.d-extra { border: 1.5px dashed var(--ink); border-radius: 10px; padding: 14px 16px; margin: 0 0 24px; background: var(--paper-3); }
.d-extra-k { font: 700 11.5px var(--mono); color: var(--red-t); letter-spacing: .1em; }
.d-extra p { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); }

/* laci: label gizi (Takar) */
.o-gizi { --r: -1deg; background: #fff; border: 3px solid #191714; padding: 12px 14px 14px; box-shadow: var(--shadow); color: #191714; }
.o-gizi .o-hd { font: 700 19px/1 var(--disp); letter-spacing: -.01em; border-bottom: 8px solid #191714; padding-bottom: 6px; margin-bottom: 8px; }
.o-gizi .o-t { font-size: 22px; }
.o-gizi .o-rows > span { border-bottom: 1px solid #191714; padding: 3px 0; }
.o-gizi .o-rows > span:last-child { border-bottom: 4px solid #191714; }

/* lampiran sertifikat */
.lampiran { position: relative; display: flex; align-items: center; gap: 16px; margin-top: 26px; padding: 12px 18px 12px 12px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper-3); text-align: left; color: var(--ink); box-shadow: var(--shadow); transition: transform .25s; max-width: 460px; }
.lampiran:hover { transform: translateY(-3px) rotate(-.4deg); }
.lampiran img { width: 74px; height: auto; border: 1px solid var(--line); transform: rotate(-3deg); box-shadow: 0 6px 12px -6px rgba(0,0,0,.4); flex: none; }
.clipper { position: absolute; left: 38px; top: -10px; width: 16px; height: 34px; border: 2.5px solid #8e8a80; border-radius: 8px; border-bottom-color: transparent; z-index: 2; }
.lp-txt { display: grid; gap: 3px; }
.lp-txt small { font: 700 11px var(--mono); color: var(--red-t); letter-spacing: .1em; }
.lp-txt b { font: 650 17px var(--disp); }
.lp-txt span { font-size: 13.5px; color: var(--ink-2); }

/* §6 struk koneksi */
.kx-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 80px); align-items: start; }
@media (min-width: 861px) { .kx-grid > div:first-child { position: sticky; top: 120px; } }
.koneksi h2 { font-size: clamp(40px, 4.4vw, 68px); margin-bottom: 20px; }
.koneksi p { color: var(--ink-2); font-size: 17px; max-width: 30em; }
.kx-note { font: 700 13px var(--mono) !important; color: var(--mute) !important; }
.kx-paper { position: relative; background: var(--paper-3); padding: 22px 22px 24px; font: 400 13px/1.45 var(--mono); color: #2a2723; box-shadow: var(--shadow); transform: rotate(.6deg); }
.kx-paper::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: conic-gradient(from -45deg at top, var(--paper-3) 90deg, #0000 0) top / 14px 10px repeat-x; }
.kx-head { display: grid; gap: 2px; text-align: center; border-bottom: 1.5px dashed #9a9384; padding-bottom: 10px; margin-bottom: 4px; }
.kx-head b { font-size: 18px; letter-spacing: .14em; }
.kx-head span { font-size: 11.5px; color: #6b655a; }
.kx-grp { padding: 10px 0 4px; border-bottom: 1.5px dashed #c9c1ad; }
.kx-g { margin: 0 0 4px; font-weight: 700; font-size: 11.5px; letter-spacing: .12em; color: var(--red-t); }
.kx-row { display: grid; grid-template-columns: auto 1fr auto; column-gap: 6px; align-items: baseline; padding: 3px 0; }
.kx-n { font-weight: 700; }
.kx-dots { border-bottom: 1.5px dotted #b3ab98; transform: translateY(-3px); min-width: 16px; }
.kx-ok { color: #15803d; font-weight: 700; }
.kx-w { grid-column: 1 / -1; font-size: 12px; color: #6b655a; }
.kx-tot { display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; padding-top: 8px; }
@media (max-width: 860px) { .kx-grid { grid-template-columns: minmax(0, 1fr); } .kx-paper { transform: none; } }

/* §7 kamar gelap */
.kamar { background: #121009; color: #efe9dc; position: relative; overflow: clip; }
.kamar::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 40% at 50% 0%, rgba(217,58,38,.16), transparent 70%); }
.kamar .sec-h h2 { color: #efe9dc; }
.kx-lede { color: #b9b1a1; font-size: 17px; max-width: 34em; margin: 16px 0 0; }
.lab { margin-top: clamp(36px, 5vw, 56px); }
.acc { --h: clamp(440px, 44vw, 560px); --ease: cubic-bezier(.2,.8,.2,1); display: flex; gap: 8px; height: var(--h); }
.acc-p { position: relative; flex: 1 1 0; min-width: 0; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #0a0907; color: #efe9dc; text-align: left; transition: flex .8s var(--ease); }
.acc-p.on { flex: 0 0 min(var(--aw), 70%); }
.acc-p.acc-v { --aw: calc(var(--h) * .5625); } /* lebar panel aktif mengikuti rasio video */
.acc-p.acc-h { --aw: calc(var(--h) * 1.6); }
.acc-p img, .acc-p video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acc-p img { filter: grayscale(1) brightness(.5); transform: scale(1.06); transition: filter .7s, transform 1.2s var(--ease); }
.acc-p:hover img { filter: grayscale(.5) brightness(.7); }
.acc-p.on img { filter: none; transform: none; }
.acc-p video { opacity: 0; animation: accIn .6s .2s forwards; }
@keyframes accIn { to { opacity: 1; } }
.acc-no { position: absolute; z-index: 2; top: 16px; left: 50%; transform: translateX(-50%); font: 700 11px var(--mono); letter-spacing: .1em; color: rgba(239,233,220,.6); transition: left .6s var(--ease), transform .6s var(--ease), color .4s; }
.acc-p.on .acc-no { left: 18px; transform: none; color: #efe9dc; }
.acc-lbl { position: absolute; z-index: 2; bottom: 20px; left: 50%; translate: -50% 0; rotate: 180deg; writing-mode: vertical-rl; max-height: calc(100% - 70px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px var(--body); color: rgba(239,233,220,.8); transition: opacity .3s; }
.acc-p.on .acc-lbl { opacity: 0; }
.acc-info { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 70px 18px 22px; background: linear-gradient(transparent, rgba(0,0,0,.78)); opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; pointer-events: none; }
.acc-p.on .acc-info { opacity: 1; transform: none; transition-delay: .35s; }
.acc-info b { font: 650 clamp(17px, 1.7vw, 22px)/1.1 var(--disp); }
.acc-info small { font: 400 12px var(--mono); color: #cfc7b6; }
.acc-open { justify-self: start; margin-top: 10px; padding: 8px 13px; border-radius: 999px; background: #efe9dc; color: #121009; font: 700 12px var(--mono); }
.acc-bar { position: absolute; z-index: 3; left: 0; bottom: 0; width: 0; height: 2px; background: var(--yellow); }
.acc-p.on .acc-bar { animation: accBar 7s linear forwards; }
.acc:hover .acc-bar, .acc.idle .acc-bar { animation-play-state: paused; }
@keyframes accBar { to { width: 100%; } }
.arsip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.arsip-h { margin: 0; font: 700 11.5px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #8f877a; }
.arsip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.arsip-t { width: 48px; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #0a0907; transition: transform .3s var(--ease, ease); }
.arsip-t img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) brightness(.7); transition: filter .3s; }
.arsip-t:hover, .arsip-t:focus-visible { transform: translateY(-3px); } .arsip-t:hover img, .arsip-t:focus-visible img { filter: none; }
@media (max-width: 700px) {
  .acc { --h: 470px; gap: 5px; } .acc-p { border-radius: 10px; }
  .acc-p.on { flex: 0 0 calc(100% - 7 * 22px); }
  .acc-p:not(.on) .acc-lbl, .acc-p:not(.on) .acc-no { display: none; }
  .acc-info { padding: 60px 14px 16px; }
}
@media (prefers-reduced-motion: reduce) { .acc-bar { display: none; } }

/* dialog media */
dialog.media { width: min(1080px, 100% - 20px); background: #121009; color: #efe9dc; border-color: #2a261f; }
.m-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 0; min-height: 60vh; }
.m-media { display: grid; place-items: center; background: #0a0907; padding: 18px; }
.m-media video, .m-media img { max-width: 100%; max-height: 82vh; border-radius: 6px; display: block; }
.m-media.m-h video, .m-media.m-h img { width: 100%; height: auto; }
.m-cert { background: #e9e3d5; }
.resep { background: var(--paper-3); color: #191714; padding: 26px 22px; font: 400 13px/1.5 var(--mono); display: flex; flex-direction: column; gap: 6px; }
.resep h3 { font: 700 26px/1.05 var(--disp); letter-spacing: -.02em; margin: 6px 0 10px; }
.rs-k { margin: 0; font-weight: 700; color: var(--red-t); letter-spacing: .12em; font-size: 11.5px; }
.rs-row { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed #c9c1ad; padding: 5px 0; }
.rs-row b { text-align: right; }
.rs-use { font: 400 15px/1.5 var(--body); color: #3d3a34; margin: 10px 0; }
.rs-foot { margin-top: auto; font-size: 11.5px; color: #6b655a; }
.resep .btn { align-self: flex-start; margin-top: 8px; }
dialog.media .d-close { background: #efe9dc; color: #191714; }
@media (max-width: 760px) { .m-in { grid-template-columns: minmax(0, 1fr); } .m-media video, .m-media img { max-height: 62vh; } }

/* sosial */
.ikuti { margin: 6px 0 20px; }
.ik-h { font: 700 12px var(--mono) !important; color: #8f877a !important; letter-spacing: .12em; margin: 0 0 6px !important; }
.ikuti ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; }
.ikuti li a { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 0; text-decoration: none; color: #efe9dc; font: 400 14px var(--mono); }
.ikuti li a:hover { color: var(--yellow); }
.sx-l { font-weight: 700; }
.sx-h { color: #8f877a; }

[data-theme="terminal"] :is(.kx-paper, .lampiran, .o-gizi, .resep, .d-extra) { background: #050d07 !important; color: var(--ink) !important; border-color: var(--ink) !important; box-shadow: none !important; }
[data-theme="terminal"] .kx-paper { -webkit-mask: none; mask: none; border: 1px solid var(--ink); }
[data-theme="terminal"] .kamar { background: #040a05; }
[data-theme="lembur"] :is(.kx-paper, .lampiran, .resep, .d-extra) { --ink: #191714; --ink-2: #3d3a34; --red-t: #a8291a; color: #191714; }