/* Reusable UI: buttons, ledger rows (work index / pricing), index hover-preview
   panel, mega-menu, cursor ring. */

/* ---------------------------------------------------------------- buttons */
.btn-primary{
  display:inline-flex; align-items:center; gap:.6em; background:var(--accent); color:var(--ink);
  font-family:var(--font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em;
  text-decoration:none; padding:.95em 1.6em; border-radius:2px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:transform .2s var(--ease-out-expo), background-color var(--animation-default);
}
.btn-primary:hover{ transform:translateY(-2px); background:#ff6c39; }

.cs-back {
  font-family: var(--font-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); text-decoration: none; transition: color var(--animation-default);
}
.cs-back:hover { color: var(--accent); }

/* ---------------------------------------------------------------- pixel-reveal buttons
   Same 16-column stepped clip-path mechanism + timing as the work-index preview card
   (js/pixel-reveal.js, ported from js/index-preview.js's revealClipPath). js/pixel-reveal.js
   injects one .px-fill per .px-btn: an absolutely-positioned duplicate of the button's
   own content in inverted colors, revealed in stepped cells on hover/focus-visible and
   retracted on leave/blur. Adds no layout width/height of its own (inset:0), so there is
   no shift; the underlying label stays exactly where it was throughout. */
.px-btn{ position:relative; }
/* .px-fill is a child of a .px-btn that already has its own clip-path (the chamfer) or
   is a plain box — a parent clip-path also clips absolutely-positioned descendants, so
   this never needs to repeat the chamfer polygon itself. */
.px-fill{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  background:var(--ink); color:var(--accent);
  clip-path:path('M0 0Z');
}

/* ---------------------------------------------------------------- ledger rows (shared idx/divider look) */
.ledger-list{ margin-top:3rem; border-top:1px solid var(--divider); }
.ledger-row{
  display:grid; align-items:center; column-gap:1.75rem;
  padding:1.75rem var(--edge); border-bottom:1px solid var(--divider);
}
.ledger-row .idx{
  font-family:var(--font-mono); font-size:1rem; color:var(--accent); opacity:.4;
  transition:opacity .25s ease-out;
}
.ledger-row:hover .idx{ opacity:1; }

/* work index (#karya) — row with role/status/arrow + hover preview + touch thumb.
   REVISION 2: every row links to its own case page (karya/<slug>.html), same
   tab, arrow on every row — no more link/non-link branching. */
.index-row{ grid-template-columns:1.1fr 1fr 22rem 1.5rem; text-decoration:none; color:inherit; padding-block:1.5rem; }
.index-row .name{ font-family:var(--font-display); font-weight:var(--display-weight); font-stretch:var(--display-stretch); font-size:clamp(1.6rem, .9rem + 2.6vw, 3.4rem); letter-spacing:var(--display-tracking); line-height:.95; }
.index-row .role{ color:var(--muted); font-family:var(--font-copy); font-size:.98rem; line-height:1.55; max-width:32ch; }
.index-row .status{
  display:block; margin-top:.6rem; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
}
.index-row .arrow{ position:relative; width:1.1rem; height:1.1rem; overflow:hidden; color:var(--accent); justify-self:end; }
.index-row .arrow svg{ position:absolute; inset:0; width:100%; height:100%; transition:transform .3s ease-out; }
.index-row .arrow svg.out{ transform:translate(0,0); }
.index-row:hover .arrow svg.out{ transform:translate(120%,-120%); }
.index-row .arrow svg.in{ transform:translate(-120%,120%); }
.index-row:hover .arrow svg.in{ transform:translate(0,0); }
/* the screenshot, always visible (2026-10-12) — 16:10 like the source images.
   Hover: the image shifts up a few px inside its frame (transform only). */
.index-row .row-thumb{ display:block; aspect-ratio:16/10; overflow:hidden; border-radius:2px; background:var(--panel); }
.index-row .row-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:transform .9s var(--ease-out-expo); }
.index-row:hover .row-thumb img{ transform:scale(1.07); }
/* peer dimming: the list quietly lowers the rows you are not pointing at */
@media (hover:hover){
  .index-list:hover .index-row{ opacity:.45; transition:opacity .35s ease-out; }
  .index-list:hover .index-row:hover{ opacity:1; }
}
.index-role-wrap{ display:block; }
@media (max-width:820px){
  .index-row{ grid-template-columns:1fr 38vw; row-gap:.5rem; align-items:start; }
  .index-row .name{ grid-column:1; }
  .index-row .index-role-wrap{ grid-column:1; }
  .index-row .role{ font-size:.92rem; }
  .index-row .row-thumb{ grid-column:2; grid-row:1 / span 2; }
  .index-row .arrow{ display:none; }
}

/* pricing (#harga) — fixed-price ledger. The four main rows are <button>s that
   open the shared <dialog> (js/price-dialog.js); the detail <ul> stays in the
   markup, hidden, and is cloned into the dialog. Add-on rows (.price-row--addon)
   are plain, non-interactive .ledger-row divs. The row hover fade uses the kit's
   --animation-default (.75s cubic-bezier(.65,.05,0,1)). */
.price-row{ border-bottom:1px solid var(--divider); }
.price-row > .ledger-row{
  grid-template-columns:13rem 1fr auto 7rem;
  border-bottom:0;
}
.price-trigger{
  width:100%; margin:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer;
  transition:background-color var(--animation-default);
}
.price-trigger:hover, .price-trigger:focus-visible{ background:rgba(233,231,226,.035); }
.price-trigger:focus-visible{ outline:1px solid var(--accent); outline-offset:-1px; }
.price-row .name{ font-family:var(--font-display); font-weight:700; font-stretch:var(--display-stretch); font-size:1.25rem; letter-spacing:-.015em; }
.price-row .line{ color:var(--muted); font-family:var(--font-copy); font-size:.92rem; line-height:1.55; }
.price-row .price{ font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:var(--text); white-space:nowrap; justify-self:end; text-align:right; }
.price-row .price.is-accent{ color:var(--accent); }
/* second muted line under a price ("Rp 7 jt jika dibeli per halaman", "atau Rp 2 jt / tahun") */
.price-row .price-sub{ display:block; margin-top:.15rem; color:var(--muted); font-family:var(--font-copy); font-weight:400; font-size:.8rem; white-space:normal; }
.price-row .more{
  justify-self:end; font-family:var(--font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em;
  color:#A4A7AD; transition:color var(--animation-default);
}
.price-trigger:hover .more, .price-trigger:focus-visible .more{ color:var(--accent); }
/* recommended row (Paket Brand): 2px accent left border, no label (house rule: no labels) */
.price-row.is-recommended{ border-left:2px solid var(--accent); }
/* add-on group: a thin gap under the main rows, smaller rows */
.price-list--addons{ margin-top:0; border-top:0; }
.price-row--addon > .ledger-row, .price-list--addons .price-trigger{ padding-block:1.15rem; }
.price-list--addons .name, .price-list--addons .price{ font-size:.98rem; }
.price-row--addon > .ledger-row{ grid-template-columns:13rem 1fr auto 7rem; }
@media (max-width:700px){
  /* ponytail bugfix (kept): the price gets its own full-width row under the line,
     left-aligned, so it never clips at 375px. The affordance sits in the last track. */
  .price-row > .ledger-row, .price-row--addon > .ledger-row{ grid-template-columns:1fr auto; row-gap:.35rem; }
  .price-row .more{ grid-row:1; grid-column:2; white-space:nowrap; }
  .price-row .line{ grid-column:1 / -1; }
  .price-row .price{ grid-column:1 / -1; justify-self:start; text-align:left; margin-top:.25rem; }
  .price-row .line{ font-size:.9rem; }
}

/* price dialog — native <dialog>, full-viewport veil (the dialog itself), panel
   centred. Open/close motion is GSAP (js/price-dialog.js): veil fade + panel
   rise 24px / scale .98 -> 1, .45s expo.out. */
.price-dialog{
  position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:1rem;
  border:0; background:rgba(11,12,14,.78); color:var(--text); overflow:hidden;
  place-items:center;
}
.price-dialog[open]{ display:grid; }
.price-dialog::backdrop{ background:transparent; }
.pd-panel{
  position:relative; width:min(560px, 100%); max-height:calc(100dvh - 2rem); overflow:auto;
  background:var(--panel); border:1px solid var(--menu-border); padding:2.5rem 2.25rem 2.25rem;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
}
.pd-panel .pd-close{ position:absolute; top:1rem; right:1rem; }
.pd-name{ font-size:clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); line-height:1; padding-right:5.5rem; }
.pd-price{ margin:1.25rem 0 0; font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); line-height:1.1; color:var(--text); }
.pd-price.is-accent{ color:var(--accent); }
.pd-sub{ margin:.35rem 0 0; color:var(--muted); font-family:var(--font-copy); font-size:.95rem; }
.pd-sub:empty{ display:none; }
.pd-line{ margin:1.25rem 0 0; color:var(--muted); font-family:var(--font-copy); font-size:1.05rem; line-height:1.6; }
.pd-list{ list-style:none; margin:1.5rem 0 0; padding:0; font-family:var(--font-copy); font-size:1.05rem; line-height:1.6; }
.pd-list li{ display:flex; gap:.9rem; align-items:flex-start; padding:.85rem 0; border-top:1px solid var(--divider); }
.pd-list li:last-child{ border-bottom:1px solid var(--divider); }
.pd-list svg{ flex:none; width:1.1rem; height:1.1rem; margin-top:.3rem; color:var(--accent); }
.pd-cta{ margin-top:1.75rem; font-size:.9rem; padding:1.05em 1.9em; }
@media (max-width:480px){ .pd-panel{ padding:2rem 1.25rem 1.5rem; } .pd-list, .pd-line{ font-size:1rem; } }

.price-notes{ margin-top:3rem; }
.price-notes p{ color:var(--muted); font-family:var(--font-copy); font-size:.92rem; line-height:1.55; margin:0; max-width:60ch; }
.price-notes p + p{ margin-top:.5rem; }
.price-notes .price-notes-lead{ color:var(--accent); }
.price-notes .price-offer{ color:var(--text); font-size:clamp(1.1rem, .95rem + .6vw, 1.45rem); line-height:1.4; max-width:44ch; margin-bottom:1.25rem; }

/* ---------------------------------------------------------------- cursor ring */
.cursor-ring{
  z-index:var(--z-cursor-ring); opacity:0; pointer-events:none; will-change:transform;
  mix-blend-mode:difference; position:fixed; top:0; left:0;
}
@media (prefers-reduced-motion:reduce), (pointer:coarse){ .cursor-ring{ display:none; } }

/* ---------------------------------------------------------------- mega-menu (curtisdesignr chamfer drawer, retokened)
   menu-trigger is a normal fixed-position child of .nav (no floating glass pill
   any more, see layout.css .nav) and its visible pill reuses .btn-primary
   directly — same chamfer clip-path, fill, font, padding. */
.menu-trigger{ position:relative; z-index:2; display:block; cursor:pointer; border:0; background:transparent; padding:0; }
.menu-trigger[aria-expanded="true"] .btn-primary{ background:var(--panel); color:var(--text); }

.menu-backdrop{ position:fixed; inset:0; z-index:var(--z-menu-backdrop); background:var(--ink); opacity:0; pointer-events:none; }
/* ponytail bugfix (kept from source): inset:0 covers the WHOLE viewport even at
   opacity:0 — without pointer-events:none here, the invisible "closed" backdrop
   silently ate every click/hover on the page. menu.js flips this to auto only
   while the menu is actually open. */
.menu-panel{
  position:fixed; top:3.125rem; bottom:3.125rem; left:1.5rem; right:1.5rem; max-height:47.5rem;
  display:flex; flex-direction:column; background:var(--menu-border);
  transform:translateX(100vw); will-change:transform; z-index:var(--z-menu-panel);
  clip-path:polygon(1.0625rem 0, calc(100% - 1.0625rem) 0, 100% 1.0625rem,
    100% calc(100% - 1.0625rem), calc(100% - 1.0625rem) 100%, 1.0625rem 100%,
    0 calc(100% - 1.0625rem), 0 1.0625rem);
}
@media (min-width:640px){ .menu-panel{ left:auto; right:3.125rem; width:26rem; } }
.menu-panel-inner{
  position:absolute; inset:.5px; display:flex; flex-direction:column; background:var(--ink); padding:1.5rem;
  clip-path:polygon(1.0625rem 0, calc(100% - 1.0625rem) 0, 100% 1.0625rem,
    100% calc(100% - 1.0625rem), calc(100% - 1.0625rem) 100%, 1.0625rem 100%,
    0 calc(100% - 1.0625rem), 0 1.0625rem);
}
.menu-head{ display:flex; align-items:flex-start; justify-content:space-between; }
.menu-head p{ font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.0975rem; margin:0; color:var(--muted); }
.menu-close{ position:relative; height:2.5rem; width:5rem; cursor:pointer; background:transparent; border:0; display:flex; align-items:center; justify-content:center; }
.menu-close .close-bg{ position:absolute; inset:0; pointer-events:none; border:.5px solid var(--divider); backdrop-filter:blur(2px); background:rgba(21,23,27,.85); }
.menu-close .close-label{ position:relative; font-family:var(--font-mono); font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.0175rem; color:var(--text); }

.menu-links{ margin-top:3rem; display:flex; flex-direction:column; align-items:flex-start; gap:.85rem; }
.menu-hover-item{ list-style:none; }
.menu-hover-item a{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:8.5px 12.5px 5px 8px; cursor:pointer; text-decoration:none; -webkit-tap-highlight-color:transparent;
}
.menu-hover-item .pill{
  position:absolute; inset:0; transform-origin:center; transform:scale(.85); opacity:0;
  background:var(--accent);
  clip-path:polygon(0% 4px, 4px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%);
  transition:opacity 180ms cubic-bezier(.34,1.56,.64,1), transform 180ms cubic-bezier(.34,1.56,.64,1), background-color 180ms cubic-bezier(.34,1.56,.64,1);
}
.menu-hover-item a:hover .pill{ transform:scale(1); opacity:1; }
.menu-hover-item .tick{ position:absolute; height:.375rem; width:.375rem; opacity:0; pointer-events:none; transition:opacity 150ms ease-out; transition-delay:40ms; }
.menu-hover-item a:hover .tick{ opacity:1; }
.menu-hover-item .tick.bl{ bottom:2px; left:2px; }
.menu-hover-item .tick.tr{ right:2px; top:2px; }
.menu-hover-item .tick span{ position:absolute; background:var(--ink); }
.menu-hover-item .tick .h{ left:0; top:50%; width:100%; height:1px; transform:translateY(-50%); }
.menu-hover-item .tick .v{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.menu-hover-item .link-label{
  position:relative; z-index:1; white-space:nowrap; color:var(--text); font-family:var(--font-display);
  font-size:34px; font-weight:600; text-transform:uppercase; line-height:.9; transition:color 150ms ease-out;
}
@media (min-width:40rem){ .menu-hover-item .link-label{ font-size:46px; } }
.menu-hover-item a:hover .link-label{ color:var(--ink); }

.connect-grid{ display:grid; grid-template-columns:1fr; row-gap:1rem; }
.menu-row{ display:flex; align-items:center; gap:1.25rem; }
.menu-row .idx{
  width:1rem; font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.0975rem;
  color:var(--accent); opacity:.4; transition:opacity 300ms ease-out;
}
.menu-row:hover .idx{ opacity:1; }
.menu-row a{
  position:relative; display:flex; align-items:center; gap:.5rem; min-width:0; flex:1; justify-content:space-between;
  font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.0975rem; color:var(--muted); text-decoration:none;
}
.menu-row .swap-icon{ position:relative; display:inline-block; height:.5rem; width:.5rem; flex-shrink:0; overflow:hidden; color:var(--accent); }
.menu-row .swap-icon svg{ position:absolute; inset:0; height:100%; width:100%; transition:transform 300ms ease-out; }
.menu-row .swap-icon svg.out{ transform:translate(0,0); }
.menu-row a:hover .swap-icon svg.out{ transform:translate(100%,-100%); }
.menu-row .swap-icon svg.in{ transform:translate(-100%,100%); }
.menu-row a:hover .swap-icon svg.in{ transform:translate(0,0); }

.menu-foot{ margin-top:1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid var(--divider); padding-top:1.375rem; }
.menu-foot p{ font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.0975rem; color:var(--muted); margin:0; }
.connect-title{ font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.0975rem; margin:0 0 1.25rem; color:var(--muted); }
.menu-spacer{ flex:1; }

@media (prefers-reduced-motion:reduce){
  .menu-panel, .menu-backdrop{ transition:none !important; }
}