/* =========================================================
   KADAL4D :: katalog, order, cek pesanan (zine grunge)
   ========================================================= */

/* ---------- KATALOG ---------- */
.toolbar { position: sticky; top: var(--head-h); z-index: 30; padding: 14px 0; background: var(--paper); border-block: 3px solid var(--ink); transition: top .5s var(--ease); }
.head.is-hidden ~ main .toolbar { top: 0; }
.toolbar__in { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar__search { position: relative; flex: 1 1 260px; max-width: 340px; }
.toolbar__search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink); stroke-width: 2.6; }
.toolbar__search .input { height: 50px; padding-left: 44px; font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; }
.toolbar .chips { flex: 1 1 auto; }
.toolbar select.input { width: auto; height: 50px; font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; }
.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px 18px; }
.cat-count { margin: 30px 0 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 700 17px/1.2 var(--f-cond); text-transform: uppercase; color: var(--fg-3); }
.cat-count b { color: var(--ink); background: var(--lime); padding: 0 5px; }
.cat-count .hud-t { font-family: var(--f-brush); font-weight: 400; color: var(--accent); transform: rotate(-2deg); }
.empty { padding: 50px 20px; text-align: center; font: 600 17px/1.4 var(--f-cond); text-transform: uppercase; color: var(--fg-3); }
.empty b { display: block; font: 400 34px/1 var(--f-display); color: var(--fg); margin-bottom: 10px; }
.req { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: clamp(22px, 3vw, 34px); margin-top: 64px; transform: rotate(-.6deg); }
.req::before { content: ''; width: 120px; height: 96px; background: url('../img/fx/gimo-think.svg') center / contain no-repeat; }
.req h3 { font-size: clamp(30px, 3.6vw, 44px); margin: 6px 0 6px; }
.req p { margin: 0; font: 600 17px/1.3 var(--f-cond); text-transform: uppercase; color: var(--fg-2); }
.req .hud-t { font-family: var(--f-brush); font-weight: 400; }

/* ---------- ORDER HERO ---------- */
.ohero { position: relative; padding: clamp(30px, 4vw, 52px) 0 clamp(36px, 4vw, 54px); }
.ohero__bg { display: none; }
.ohero__in { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 440px); gap: 28px; align-items: center; margin-top: 22px; }
.ohero__cover { width: 140px; aspect-ratio: 1; transform: rotate(-4deg); }
.ohero__ico { width: 100%; height: 100%; font-size: 40px; border-width: 4px; box-shadow: 6px 6px 0 var(--ink); }
.ohero h1 { font-size: clamp(42px, 5.6vw, 76px); margin: 8px 0 14px; }
.ohero__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.ohero__meta .badge:nth-child(2) { background: var(--paper); transform: rotate(1.5deg); }
.ohero__meta .badge:nth-child(3) { background: var(--gold); }
.ohero__desc { max-width: 58ch; color: var(--fg-2); margin: 16px 0 0; font-size: 17px; }
.ohero__shot { position: relative; margin: 0; aspect-ratio: 16 / 10; border: 4px solid var(--ink); border-radius: var(--rough); overflow: hidden; box-shadow: 9px 9px 0 var(--lime); transform: rotate(2deg); }
.ohero__shot .art { position: absolute; inset: 0; }
.ohero__shot .art--gift .gift__logo { width: 30%; }
.ohero__shot figcaption { position: absolute; left: 10px; bottom: 10px; z-index: 5; padding: 5px 9px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); font: 800 13px/1 var(--f-cond); text-transform: uppercase; transform: rotate(-2deg); }
.ohero .crumbs + .ohero__in .hud-t { font-family: var(--f-brush); font-weight: 400; color: var(--accent); font-size: 17px; }

/* ---------- ORDER LAYOUT ---------- */
.order { display: grid; grid-template-columns: 1fr 380px; gap: 30px; align-items: start; padding: 30px 0 80px; }
.steps { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.step { padding: clamp(20px, 3vw, 30px); }
.step:nth-child(even) { transform: rotate(.35deg); }
.step:nth-child(odd) { transform: rotate(-.35deg); }
.step__h { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.step__n { flex-shrink: 0; width: 56px; height: 56px; display: grid; place-items: center; font: 400 28px/1 var(--f-display); color: var(--ink); background: var(--gold); border: 3px solid var(--ink); border-radius: 50% 46% 52% 44%; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-6deg); transition: background .3s; }
.step.is-done .step__n { background: var(--lime); }
.step.is-done .step__n::after { content: ''; position: absolute; }
.step__h h2 { font-size: clamp(28px, 3vw, 38px); }
.step__h p { margin: 4px 0 0; font: 600 16px/1.3 var(--f-cond); text-transform: uppercase; color: var(--fg-3); }
.fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.fields .field--full { grid-column: 1 / -1; }
.hint { display: flex; gap: 12px; padding: 14px 16px; margin-top: 18px; border: 2.5px dashed var(--ink); border-radius: var(--rough); background: color-mix(in srgb, var(--lime) 22%, var(--card)); font-size: 15px; color: var(--fg-2); }
.hint svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--ink); margin-top: 1px; }
.tabs { display: flex; gap: 10px; margin-bottom: 18px; }
.tab { padding: 9px 16px; border: 3px solid var(--ink); border-radius: var(--rough); background: var(--paper-2); font: 800 16px/1 var(--f-cond); text-transform: uppercase; color: var(--ink); transition: transform .2s var(--ease), background .2s; }
.tab.is-active { background: var(--ink); color: var(--lime); transform: rotate(-2deg); }
.items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.item { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; text-align: left; border-radius: var(--rough); background: var(--field); border: 3px solid var(--ink); transition: transform .25s var(--ease), background .2s, box-shadow .2s; }
.item:hover { transform: rotate(-1deg) translateY(-2px); box-shadow: 4px 4px 0 var(--ink); }
.item.is-sel { background: var(--lime); box-shadow: 5px 5px 0 var(--ink); transform: rotate(-1.5deg); }
.item.is-sel::after { content: ''; position: absolute; top: -12px; right: -10px; width: 34px; height: 34px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5E23B' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 18px no-repeat; border: 2.5px solid var(--paper); }
.item__amt { display: flex; align-items: center; gap: 7px; font: 400 25px/1 var(--f-display); color: var(--ink); }
.item__amt svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--gold); stroke: var(--ink); stroke-width: 1.5; }
.item__cur { font: 700 13px/1.1 var(--f-cond); text-transform: uppercase; color: var(--fg-3); }
.item__amt .item__cur { font-size: 14px; color: var(--fg-2); }
.item__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 6px; font: 800 19px/1 var(--f-cond); color: var(--ink); }
.item__price s { font: 600 13px/1 var(--f-cond); color: var(--fg-4); }
.item.is-sel .item__price s { color: #4B5E1E; }
.item__tag { position: absolute; top: -10px; left: 10px; }
.item.is-sel .item__tag { left: 10px; }
.paygrp + .paygrp { margin-top: 20px; }
.paygrp__h { display: flex; justify-content: space-between; margin-bottom: 10px; font: 400 18px/1 var(--f-brush); color: var(--accent); }
.pays { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pay { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 11px 13px; text-align: left; border-radius: var(--rough); background: var(--field); border: 3px solid var(--ink); transition: transform .25s var(--ease), background .2s, box-shadow .2s; }
.pay:hover { transform: rotate(-.8deg); box-shadow: 4px 4px 0 var(--ink); }
.pay.is-sel { background: var(--lime); box-shadow: 5px 5px 0 var(--ink); transform: rotate(-1deg); }
.pay[disabled] { opacity: .4; cursor: not-allowed; }
.pay__logo { height: 34px; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 800 12px/1 var(--f-cond); text-transform: uppercase; transform: rotate(-3deg); }
.pay b { display: block; font: 800 18px/1.1 var(--f-cond); text-transform: uppercase; color: var(--ink); }
.pay small { font: 600 13px/1.2 var(--f-cond); text-transform: uppercase; color: var(--fg-3); }
.pay__tot { text-align: right; font: 800 17px/1.2 var(--f-cond); color: var(--ink); }
.pay__tot small { display: block; font: 600 12px/1.2 var(--f-cond); color: var(--fg-4); }
.pay.is-sel small, .pay.is-sel .pay__tot small { color: #3E4F14; }
.promo-row { display: flex; gap: 10px; }
.promo-row .input { text-transform: uppercase; font-family: var(--f-cond); font-weight: 800; }
.promo-row .btn { min-height: 54px; }

/* ringkasan: kartu tinta */
.summary { position: sticky; top: calc(var(--head-h) + 22px); padding: 24px; display: flex; flex-direction: column; gap: 14px; background: var(--ink); border-color: var(--ink); box-shadow: 7px 7px 0 var(--gold); transform: rotate(.6deg); }
.summary::before { content: 'Struk kamu'; position: absolute; top: -18px; left: 20px; padding: 4px 12px; background: var(--lime); color: var(--ink); border: 3px solid var(--ink); font: 400 17px/1 var(--f-brush); transform: rotate(-4deg); }
.summary__game { display: flex; align-items: center; gap: 14px; padding: 6px 0 14px; border-bottom: 2px dashed rgba(242, 232, 207, .3); }
.summary__game .rank__ic { width: 52px; height: 52px; border-color: var(--paper); }
.summary__game b { display: block; color: var(--paper); font: 400 22px/1 var(--f-display); text-transform: uppercase; }
.summary__game small { color: var(--fg-3); font: 600 14px/1 var(--f-cond); text-transform: uppercase; }
.srow { display: flex; justify-content: space-between; gap: 14px; font: 600 16px/1.25 var(--f-cond); text-transform: uppercase; color: var(--fg-3); }
.srow span:last-child { color: var(--fg); text-align: right; word-break: break-word; }
.srow.is-disc span:last-child { color: var(--lime); }
.stotal { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 2px dashed rgba(242, 232, 207, .3); }
.stotal span { font: 400 18px/1 var(--f-brush); color: var(--fg-2); }
.stotal b { font: 400 40px/1 var(--f-display); color: var(--lime); transition: transform .3s var(--ease); }
.stotal b.bump { animation: bump .45s var(--ease); }
@keyframes bump { 40% { transform: scale(1.14) rotate(-3deg); } }
.summary__safe { display: flex; gap: 10px; font: 600 14px/1.3 var(--f-cond); text-transform: uppercase; color: var(--fg-3); }
.summary__safe svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--lime); }
.checklist { display: grid; gap: 8px; }
.checklist div { display: flex; align-items: center; gap: 10px; font: 700 15px/1 var(--f-cond); text-transform: uppercase; color: var(--fg-4); transition: color .3s; }
.checklist div::before { content: ''; width: 18px; height: 18px; border: 2.5px solid var(--fg-4); border-radius: 3px; flex-shrink: 0; transform: rotate(-4deg); transition: background .3s, border-color .3s; }
.checklist div.is-ok { color: var(--paper); text-decoration: line-through; text-decoration-color: var(--lime); text-decoration-thickness: 2px; }
.checklist div.is-ok::before { background: var(--lime); border-color: var(--lime); }
.summary .btn--gold { box-shadow: 4px 4px 0 var(--paper); }
.mbar { display: none; }

/* info bawah */
.oinfo { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding-bottom: 40px; }
.oinfo__box { padding: clamp(22px, 3vw, 32px); }
.oinfo__box h2 { font-size: 34px; margin-bottom: 18px; }
.oinfo__box .acc { box-shadow: none; }
.howto { counter-reset: h; list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.howto li { counter-increment: h; display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; color: var(--fg-2); font-size: 16px; }
.howto li::before { content: counter(h); display: grid; place-items: center; height: 42px; font: 400 22px/1 var(--f-display); border: 3px solid var(--ink); border-radius: 50%; background: var(--lime); color: var(--ink); transform: rotate(-6deg); }
.howto b { color: var(--ink); }
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

/* modal konfirmasi */
.confirm h3 { font-size: 34px; margin: 10px 0 16px; }
.confirm .hud-t { font-family: var(--f-brush); font-weight: 400; color: var(--accent); }
.confirm .srow { padding: 9px 0; border-bottom: 2px dashed var(--line-soft); color: var(--fg-3); }
.confirm .srow span:last-child { color: var(--ink); }
.confirm .stotal { border-color: var(--ink); }
.confirm .stotal span { color: var(--ink); }
.confirm .stotal b { color: var(--ink); background: url('../img/fx/brush-lime.svg') center / 100% 90% no-repeat; padding: 0 8px; }
.confirm__act { display: flex; gap: 12px; margin-top: 22px; }
.confirm__act .btn { flex: 1; }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(20, 18, 16, .25); border-top-color: var(--ink); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- CEK PESANAN ---------- */
.trk-form { display: flex; gap: 12px; max-width: 580px; margin-top: 26px; }
.trk-form .input { height: 60px; font: 800 22px/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; }
.trk-form .btn { min-height: 60px; }
.trk { display: grid; grid-template-columns: 1fr 370px; gap: 32px; align-items: start; padding: 40px 0 20px; }
.inv { padding: clamp(22px, 3vw, 34px); transform: rotate(-.4deg); }
.inv__h { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 2.5px dashed var(--line-soft); }
.inv__h .hud-t { font-family: var(--f-brush); font-weight: 400; color: var(--accent); }
.inv__no { font: 400 clamp(30px, 3.6vw, 44px)/1 var(--f-display); color: var(--ink); display: flex; align-items: center; gap: 10px; }
.inv__no button { width: 38px; height: 38px; display: grid; place-items: center; border: 2.5px solid var(--ink); border-radius: 4px; background: var(--lime); color: var(--ink); }
.inv__no button svg { width: 18px; height: 18px; }
/* status = cap stempel */
.status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 5px; border: 3px solid currentColor; border-radius: 6px; font: 400 22px/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; transform: rotate(-7deg); background: transparent; }
.status--wait { color: #B86A00; }
.status--proc { color: var(--info); }
.status--ok { color: #2F6A0B; }
.status--exp { color: var(--red); }
.status .live-dot { border-color: currentColor; background: currentColor !important; }
.tline { display: grid; grid-template-columns: repeat(4, 1fr); margin: 26px 0; position: relative; }
.tline::before { content: ''; position: absolute; top: 18px; left: 12.5%; right: 12.5%; height: 0; border-top: 3px dashed var(--fg-4); }
.tline__fill { position: absolute; top: 16px; left: 12.5%; height: 5px; width: 0; background: var(--ink); transition: width 1s var(--ease); }
.tl { position: relative; text-align: center; font: 700 15px/1.1 var(--f-cond); text-transform: uppercase; color: var(--fg-4); padding: 0 4px; }
.tl i { position: relative; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 8px; border-radius: 50%; background: var(--card); border: 3px solid var(--fg-4); transition: all .4s var(--ease); }
.tl i svg { width: 16px; height: 16px; stroke-width: 3; opacity: 0; }
.tl.is-on { color: var(--ink); }
.tl.is-on i { background: var(--lime); border-color: var(--ink); color: var(--ink); }
.tl.is-on i svg { opacity: 1; }
.tl.is-cur i { background: var(--gold); border-color: var(--ink); animation: hop .6s var(--ease) infinite alternate; }
.inv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; }
.inv__grid div small { display: block; font: 700 13px/1 var(--f-cond); text-transform: uppercase; color: var(--fg-4); margin-bottom: 5px; }
.inv__grid div b { font: 700 18px/1.2 var(--f-cond); color: var(--ink); word-break: break-word; }
.inv .srow { color: var(--fg-3); }
.inv .srow span:last-child { color: var(--ink); }
.inv__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding-top: 16px; border-top: 3px solid var(--ink); }
.inv__total .hud-t { font-family: var(--f-brush); font-weight: 400; font-size: 20px; color: var(--ink); }
.inv__total b { font: 400 44px/1 var(--f-display); color: var(--ink); background: url('../img/fx/brush-lime.svg') center / 100% 90% no-repeat; padding: 0 10px; }
.inv__act { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.paybox { padding: 26px 24px; text-align: center; background: var(--ink); border-color: var(--ink); box-shadow: 7px 7px 0 var(--lime); transform: rotate(.8deg); }
.paybox h3 { font-size: 32px; margin-bottom: 6px; color: var(--paper); }
.paybox .qr { width: 220px; height: 220px; margin: 18px auto; padding: 12px; background: #fff; border: 4px solid var(--lime); }
.paybox .qr svg { width: 100%; height: 100%; }
.paybox .code { margin: 18px 0; padding: 14px; background: var(--paper); border: 3px dashed var(--ink); font: 400 26px/1 var(--f-display); letter-spacing: .04em; color: var(--ink); display: flex; justify-content: center; align-items: center; gap: 12px; transform: rotate(-1deg); }
.paybox .code button { color: var(--ink); }
.paybox .code button svg { width: 20px; height: 20px; }
.paybox .exp { display: inline-block; padding: 6px 12px; background: var(--red); border: 2.5px solid var(--paper); font: 800 15px/1 var(--f-cond); text-transform: uppercase; color: #fff; transform: rotate(-2deg); }
.paybox ol { text-align: left; color: var(--fg-2); font-size: 15px; padding-left: 20px; margin: 16px 0 0; display: grid; gap: 6px; }
.paybox p.mute { color: var(--fg-3); font-size: 15px; }
.paybox .ok-ic { width: 96px; height: 96px; margin: 6px auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); border: 4px solid var(--paper); color: var(--ink); animation: popIn .6s var(--ease); }
.paybox .ok-ic svg { width: 46px; height: 46px; stroke-width: 3; }
@keyframes popIn { from { transform: scale(.3) rotate(-30deg); opacity: 0; } }
.demo-note { margin-top: 14px; font: 600 13px/1.3 var(--f-cond); text-transform: uppercase; color: var(--fg-4); }
.points { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; background: var(--gold); border: 3px solid var(--paper); color: var(--ink); font: 700 15px/1.3 var(--f-cond); text-transform: uppercase; text-align: left; transform: rotate(-1.5deg); }
.points svg { width: 24px; height: 24px; flex-shrink: 0; }
.points .gold { color: var(--ink); }
.hist { margin-top: 6px; }
.hist__row { display: grid; grid-template-columns: 48px 1fr auto auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 2.5px dashed var(--line-soft); transition: transform .3s var(--ease); }
.hist__row:last-child { border-bottom: 0; }
.hist__row:hover { transform: translateX(6px); }
.hist__row .rank__ic { width: 48px; height: 48px; }
.hist__row b { display: block; font: 800 18px/1.1 var(--f-cond); text-transform: uppercase; color: var(--ink); }
.hist__row small { font: 600 14px/1.2 var(--f-cond); text-transform: uppercase; color: var(--fg-3); }
.hist__row .p { font: 400 22px/1 var(--f-display); color: var(--ink); }
.hist__row .status { font-size: 16px; padding: 4px 9px 3px; border-width: 2.5px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1180px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1080px) {
  .order, .trk { grid-template-columns: 1fr; }
  .summary { position: static; margin-top: 10px; }
  .oinfo { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .rel-grid { grid-template-columns: repeat(2, 1fr); }
  .ohero__in { grid-template-columns: auto minmax(0, 1fr); }
  .ohero__shot { grid-column: 1 / -1; max-width: 640px; }
  .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--ink); border-top: 4px solid var(--lime); transform: translateY(110%); transition: transform .5s var(--ease); }
  .mbar.is-on { transform: none; }
  .mbar small { display: block; font: 400 15px/1 var(--f-brush); color: var(--fg-3); }
  .mbar b { font: 400 30px/1.1 var(--f-display); color: var(--lime); }
  body[data-page="order"] .foot { padding-bottom: 84px; }
  .req { grid-template-columns: 1fr auto; }
  .req::before { display: none; }
}
@media (max-width: 720px) {
  .toolbar { position: static; }
  .toolbar .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 6px 16px 8px; scrollbar-width: none; }
  .toolbar .chips::-webkit-scrollbar { display: none; }
  .chip { flex-shrink: 0; }
  .toolbar__search { max-width: none; }
  .toolbar select.input { flex: 1; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .req { grid-template-columns: 1fr; }
  .ohero__in { grid-template-columns: 1fr; }
  .ohero__cover { width: 90px; }
  .fields, .pays { grid-template-columns: 1fr; }
  .items { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .item { padding: 12px; }
  .item__amt { font-size: 21px; }
  .rel-grid { grid-template-columns: 1fr; }
  .trk-form { flex-direction: column; }
  .tl { font-size: 12px; }
  .inv__grid { grid-template-columns: 1fr; }
  .hist__row { grid-template-columns: 44px 1fr auto; }
  .hist__row .status { display: none; }
  .step, .inv, .summary, .paybox { transform: none !important; }
}

/* =========================================================
   HALAMAN PER GAME (statis)
   ========================================================= */
.gprice { padding: 20px 0 50px; }
.gprice .tbl { max-width: 900px; }
.gabout { font-size: 16.5px; color: var(--fg-2); margin-bottom: 18px; }
.gfacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 2.5px dashed var(--line-soft); }
.gfacts li { display: grid; grid-template-columns: 160px 1fr; gap: 14px; padding: 10px 0; border-bottom: 2.5px dashed var(--line-soft); font: 600 15px/1.35 var(--f-cond); text-transform: uppercase; }
.gfacts b { color: var(--ink); font-weight: 800; }
.gfacts span { color: var(--fg-2); }
.gfaq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.gfaq .acc + .acc { margin-top: 0; }
.summary__legal { margin: -4px 0 0; font: 600 13px/1.35 var(--f-cond); text-transform: uppercase; color: var(--fg-3); }
.summary__legal a { color: var(--lime); text-decoration: underline; }
@media (max-width: 720px) {
  .gfaq { grid-template-columns: 1fr; }
  .gfacts li { grid-template-columns: 1fr; gap: 2px; }
}