/* Teknisi AC Panggilan — arah visual "Blueprint Teknis".
   Lembar cetak navy, grid 24 px, garis ukur berpanah, label teknis miring.
   Tanpa glow, tanpa glassmorphism, tanpa gradien dekoratif. */
:root {
  color-scheme: dark;

  --bg: #0B2E4F;
  --surface: #0F3A62;
  --deep: #082138;
  --ink: #EAF2F8;
  --ink-soft: #B7D2E4;
  --ink-dim: #9FC0D8;
  --line: #24507A;
  --line-2: #4A7BA6;
  --accent: #FFC53D;
  --accent-2: #6FD3FF;
  --warn: #FFB4A2;
  --grid: rgba(234, 242, 248, .045);

  --sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body {
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, rgba(234, 242, 248, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(234, 242, 248, .06) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--ink);
  font-family: var(--sans);
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Bar atas ---------- */
.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 13px clamp(14px, 3.4vw, 40px);
  background: var(--deep);
  border-bottom: 1px solid var(--line-2);
}

.bar-left {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.bar .demo-badge { color: var(--accent); }

.bar-brand {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  padding-left: 13px;
  border-left: 1px solid var(--line-2);
  line-height: 1.4;
}

.bar-meta {
  margin: 0;
  display: flex;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ---------- Kerangka lembar ---------- */
.sheet {
  display: grid;
  gap: clamp(20px, 2.6vw, 32px);
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 42px) clamp(14px, 3.4vw, 40px) 56px;
}

/* ---------- Intro ---------- */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: end;
  padding-bottom: clamp(18px, 2.2vw, 26px);
  border-bottom: 1px solid var(--line-2);
}

.stamp {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.stamp::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--accent);
  flex: 0 0 auto;
}

h1 {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.72rem, 4.2vw, 3.05rem);
  line-height: 1.02;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--ink);
  max-width: 25ch;
  overflow-wrap: break-word;
}

.lede {
  margin: 0;
  max-width: 54ch;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-soft);
}

.specstrip {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
}

.specstrip > div {
  background: var(--surface);
  padding: 11px 13px;
  min-width: 0;
}

.specstrip dt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.specstrip dd {
  margin: 5px 0 0;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.15;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- Tiga panel ---------- */
.panels {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.06fr) minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  align-items: start;
}

.panel {
  position: relative;
  background-color: var(--surface);
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid var(--line-2);
  min-width: 0;
}

.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--accent);
  pointer-events: none;
}

.panel::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.panel::after {
  right: -1px;
  bottom: -1px;
  border-left: 0;
  border-top: 0;
}

.panel-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  background: var(--deep);
  border-bottom: 1px solid var(--line-2);
}

.panel-no {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  background: var(--accent);
  color: var(--deep);
  padding: 1px 5px;
}

.panel-head h2 {
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

.panel-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
}

.panel-body {
  padding: clamp(13px, 1.5vw, 17px);
  min-width: 0;
}

/* ---------- Panel 01: tarif ---------- */
.tarif {
  width: 100%;
  border-collapse: collapse;
}

.tarif caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-bottom: 8px;
}

.tarif thead th {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: left;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--line-2);
}

.tarif thead th + th { text-align: right; }

.tarif tbody th {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  text-align: left;
  padding: 8px 8px 8px 0;
  border-bottom: 1px solid var(--line);
  white-space: normal;
}

.tarif tbody td {
  font-family: var(--mono);
  font-size: 12px;
  text-align: right;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tarif tbody tr:last-child th,
.tarif tbody tr:last-child td { border-bottom: 0; }

/* Garis ukur berpanah */
.measure {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 15px 0 5px;
  min-height: 52px;
}

.dim-line {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  background: var(--line-2);
}

.dim-line::before,
.dim-line::after {
  content: "";
  position: absolute;
  top: -3px;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
}

.dim-line::before {
  left: 0;
  border-right: 6px solid var(--line-2);
}

.dim-line::after {
  right: 0;
  border-left: 6px solid var(--line-2);
}

.tag-slant {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-2);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1;
  white-space: nowrap;
}

.measure-cap {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-dim);
}

.rules {
  list-style: none;
  margin: 15px 0 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--line);
}

.rules li {
  display: grid;
  grid-template-columns: minmax(0, 72px) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.rules li:last-child { border-bottom: 0; }

.rule-k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.rule-v {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- Panel 02: formulir ---------- */
.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cells {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  counter-reset: fcell;
}

.cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.cell::before {
  counter-increment: fcell;
  content: counter(fcell, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--accent-2);
}

.cell-wide { grid-column: 1 / -1; }

.fld-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-dim);
}

.fld-unit {
  font-weight: 400;
  color: var(--ink-dim);
}

.fld-req {
  color: var(--accent);
  font-weight: 600;
  margin-left: 4px;
}

.fld-input {
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
  background: var(--deep);
  border: 1px solid var(--line-2);
  border-radius: 0;
  transition: border-color .15s ease, background-color .15s ease;
}

.fld-input:hover { border-color: var(--ink-dim); }

.fld-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

select.fld-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><path d='M0 0h9L4.5 6z' fill='%23FFC53D'/></svg>");
  background-repeat: no-repeat;
  background-position: right 11px center;
}

.fld-input option {
  background: var(--deep);
  color: var(--ink);
}

.fld-hint {
  margin: 0;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-dim);
  opacity: 1;
}

.fld-error {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--warn);
}

.fld.is-error .fld-input {
  border-color: var(--warn);
  background: rgba(255, 180, 162, .08);
}

.btn {
  min-height: 48px;
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--deep);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 0;
  transition: background-color .15s ease, color .15s ease;
}

.btn:hover { background: #FFD268; }

.btn:active { background: #F0B72E; }

.btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.form-note {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-dim);
}

.alert {
  margin: 0 0 13px;
  padding: 9px 12px;
  border-left: 3px solid var(--warn);
  background: rgba(255, 180, 162, .1);
  color: #FFE3DC;
  font-size: 12px;
  line-height: 1.5;
}

/* ---------- Panel 03: work order ---------- */
.wo-code-label {
  margin: 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.wo-code {
  margin: 4px 0 14px;
  padding-bottom: 10px;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--accent);
  border-bottom: 1px dashed var(--line-2);
  overflow-wrap: anywhere;
}

.wo-head {
  margin: 0 0 13px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.wo-meta {
  margin: 0 0 14px;
  padding-bottom: 12px;
  display: grid;
  gap: 8px;
  border-bottom: 1px dashed var(--line-2);
}

.wo-meta div { display: grid; gap: 2px; }

.wo-meta dt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.wo-meta dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.wo-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.wo-lines li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px minmax(0, 90px);
  gap: 8px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}

.ln-main {
  display: grid;
  gap: 1px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.ln-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-dim);
}

.ln-qty {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  text-align: right;
}

.ln-amt {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}

.wo-total {
  display: grid;
  gap: 2px;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
}

.wo-total span {
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.wo-total strong {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.wo-msg {
  margin: 13px 0 0;
  padding-left: 9px;
  border-left: 2px solid var(--accent-2);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.wo-again {
  display: inline-block;
  margin-top: 14px;
  padding-bottom: 2px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-2);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.wo-again:hover { color: var(--ink); }

.wo-empty-code {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .3em;
  color: var(--line-2);
}

.wo-empty h3 {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
}

.wo-empty p {
  margin: 0 0 13px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-dim);
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  counter-reset: st;
}

.steps li {
  counter-increment: st;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.steps li::before {
  content: "0" counter(st);
  font-family: var(--mono);
  font-size: 9.5px;
  text-align: center;
  padding: 2px 0;
  color: var(--accent-2);
  border: 1px solid var(--line-2);
}

/* ---------- Arsip ---------- */
.archive {
  display: grid;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}

.archive-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
}

.archive-head h2 {
  margin: 0;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}

.archive-count {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--ink-dim);
}

.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.archive-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.arc-code {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--accent);
  white-space: nowrap;
}

.arc-sum {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.arc-total {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
}

.arc-when {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-dim);
  white-space: nowrap;
}

.archive-empty {
  margin: 0;
  font-size: 12px;
  color: var(--ink-dim);
}

.num { font-variant-numeric: tabular-nums; }

/* ---------- Footer ---------- */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 28px;
  padding: 18px clamp(14px, 3.4vw, 40px);
  background: var(--deep);
  border-top: 1px solid var(--line-2);
  font-size: 11.5px;
  color: var(--ink-dim);
}

.foot-block {
  display: grid;
  gap: 4px;
  max-width: 58ch;
}

.foot-block p {
  margin: 0;
  line-height: 1.5;
}

.foot-mark {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

.foot-mono {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.foot-right {
  text-align: right;
  justify-items: end;
}

.foot-credit {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Responsif ---------- */
@media (max-width: 1180px) {
  .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-spec { grid-column: 1 / -1; }
  .panel-spec .panel-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 clamp(16px, 3vw, 32px);
    align-items: start;
  }
  .panel-spec .tarif { grid-column: 1; }
  .panel-spec .measure,
  .panel-spec .measure-cap { grid-column: 2; }
  .panel-spec .measure { align-self: end; margin-top: 0; }
  .panel-spec .rules { grid-column: 2; margin-top: 10px; }
}

@media (max-width: 820px) {
  .intro {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .panels { grid-template-columns: 1fr; }
  .panel-spec { grid-column: auto; }
  .panel-spec .panel-body { display: block; }
  .panel-spec .measure { align-self: auto; margin-top: 15px; }
  .panel-spec .rules { margin-top: 15px; }
}

@media (max-width: 720px) {
  .bar-meta { display: none; }
  .cells { grid-template-columns: 1fr; }
  .cell-wide { grid-column: auto; }
  .specstrip dd { font-size: 15px; }
  .archive-list li {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    padding: 11px 0;
  }
  .arc-code { grid-column: 1; grid-row: 1; }
  .arc-total { grid-column: 2; grid-row: 1; }
  .arc-sum { grid-column: 1 / -1; grid-row: 2; }
  .arc-when { grid-column: 1 / -1; grid-row: 3; }
  .foot-right { text-align: left; justify-items: start; }
}

@media (max-width: 420px) {
  .bar { padding: 11px 14px; }
  .bar-brand { font-size: 10px; letter-spacing: .1em; padding-left: 11px; }
  .sheet { padding-left: 12px; padding-right: 12px; }
  .panel-body { padding: 12px; }
  .rules li { grid-template-columns: minmax(0, 66px) minmax(0, 1fr); gap: 8px; }
  .fld-input { font-size: 14.5px; }
}