@font-face { font-family: "Jersey 15"; src: url(fonts/Jersey15-Regular.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url(fonts/Silkscreen-Regular.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url(fonts/Silkscreen-Bold.ttf); font-weight: 700; font-display: swap; }
/* gaya situs (h2, .step, .lead, table, .code, .toc) tidak boleh bocor ke isi buku */
.ard :where(h1, h2, h3, h4, p, table, th, td, tr, code, pre, figure, figcaption, ul, ol, li, a, .code, .lead, .step, .toc, .out, .note) { all: revert; }
.ard { --ink: #1E1240; --ink-2: #2D1B5E; --paper: #FFF4DC; --paper-2: #F6E7C4; --muted: #5B4F7A;
        --pink: #FF4F9A; --yellow: #FFD23F; --cyan: #3DDCFF; --lime: #9BEA4F; }
.ard * { box-sizing: border-box; }
.ard { background: #FFF4DC; }
.ard { margin: 0; font: 400 8.5pt/1.56 "Inter", sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11";
       orphans: 3; widows: 3; hyphens: manual; }
.ard p { margin: 0 0 2.4mm; }
.ard ul, .ard ol { margin: 0 0 2.4mm; padding-left: 4.6mm; }
.ard li { margin-bottom: 1mm; }
.ard b, .ard strong { font-weight: 700; }
.ard code { font: 600 7.6pt/1 "JetBrains Mono", monospace; background: var(--paper-2); padding: .25mm .8mm; border-radius: .5mm; }
.ard a { color: inherit; }
.ard .buka { page: buka; break-before: page; height: 210mm; position: relative; background: var(--ink); color: var(--paper); padding: 22mm 14mm 16mm; overflow: hidden; }
.ard .buka .px { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,244,220,.10) 1.1px, transparent 1.4px); background-size: 4mm 4mm; }
.ard .buka .no { position: relative; font: 700 8pt/1 "Silkscreen"; letter-spacing: 1pt; color: var(--yellow); }
.ard .buka .big { position: relative; font: 400 92pt/.8 "Jersey 15"; color: var(--pink); margin: 4mm 0 0 -1mm; }
.ard .buka h1 { position: relative; margin: 6mm 0 0; font: 400 30pt/.95 "Jersey 15"; color: var(--paper); max-width: 110mm; }
.ard .buka .intro { position: relative; margin-top: 5mm; font-size: 9pt; line-height: 1.55; max-width: 108mm; color: #E9E1F7; }
.ard .buka .box { position: absolute; left: 14mm; right: 14mm; bottom: 16mm; display: grid; grid-template-columns: 1.25fr 1fr; gap: 4mm; }
.ard .buka .box div { border: .45mm solid var(--paper); padding: 3mm 3.4mm; }
.ard .buka .box h4 { margin: 0 0 2mm; font: 700 6.6pt/1 "Silkscreen"; letter-spacing: .6pt; color: var(--yellow); }
.ard .buka .box ul { margin: 0; padding-left: 4mm; font-size: 7.6pt; line-height: 1.45; }
.ard .buka .box li { margin-bottom: .8mm; }
.ard .isi { break-before: page; }
.ard .isi > :first-child { margin-top: 0; }
.ard h2.sub { break-before: auto; margin: 7mm 0 2.6mm; font: 400 21pt/1 "Jersey 15"; break-after: avoid; display: flex; gap: 2.6mm; align-items: baseline; }
.ard h2.sub .n { font: 700 7pt/1 "Silkscreen"; background: var(--ink); color: var(--paper); padding: 1.3mm 2mm 1.1mm; transform: translateY(-1.2mm); }
.ard h2.sub mark { background: none; color: var(--pink); }
.ard h2.sub.baru { break-before: page; margin-top: 0; }
.ard h3.step { margin: 4.4mm 0 1.8mm; font: 700 7.4pt/1.2 "Silkscreen"; letter-spacing: .5pt; display: flex; align-items: center; gap: 2mm; break-after: avoid; }
.ard h3.step i { font-style: normal; display: inline-grid; place-items: center; min-width: 4.6mm; height: 4.6mm; background: var(--pink); color: #fff; font: 400 9pt/1 "Jersey 15"; }
.ard h4 { margin: 3.6mm 0 1.4mm; font: 700 8.6pt/1.3 "Inter"; break-after: avoid; }
.ard .kicker { margin: -1mm 0 2.6mm; display: flex; gap: 2mm; align-items: center; font: 700 6.6pt/1 "Silkscreen"; letter-spacing: .6pt; break-after: avoid; }
.ard .kicker span { background: var(--pink); color: #fff; padding: 1.1mm 1.8mm .9mm; }
.ard .kicker em { font-style: normal; color: var(--muted); }
.ard .lead { font-size: 9pt; line-height: 1.55; }
.ard figure { margin: 2.4mm 0 3.4mm; break-inside: avoid; }
.ard figure .frame { border: .45mm solid var(--ink); background: #FFFBF0; padding: 1.6mm; box-shadow: 1.2mm 1.2mm 0 var(--ink); }
.ard figure .frame.plain { border: 0; background: none; box-shadow: none; padding: 0; }
.ard figure svg { display: block; width: 100%; height: auto; }
.ard figcaption { margin-top: 2.4mm; font-size: 7pt; line-height: 1.4; color: var(--muted); }
.ard figcaption b { color: var(--ink); }
.ard .code { position: relative; background: var(--ink); color: #EDE8FF; padding: 5.2mm 3mm 2.8mm; margin: 2.4mm 1.2mm 3.6mm 0;
        font: 400 6.9pt/1.5 "JetBrains Mono", monospace; box-shadow: 1.2mm 1.2mm 0 var(--pink); break-inside: avoid; }
.ard .code .bar { position: absolute; top: 0; right: 0; background: var(--pink); color: #fff; font: 700 5.6pt/1 "Silkscreen"; letter-spacing: .4pt; padding: 1.2mm 2mm 1mm; }
.ard .code pre { margin: 0; font: inherit; white-space: pre-wrap; }
.ard .k { color: var(--pink); font-weight: 600; }
.ard .t { color: var(--cyan); }
.ard .s { color: var(--yellow); }
.ard .n { color: var(--lime); }
.ard .c { color: #9A90C2; font-style: italic; }
.ard .mk { display: inline-grid; place-items: center; width: 3.6mm; height: 3.6mm; margin-left: 1.2mm; background: var(--yellow); color: var(--ink);
      font: 700 6pt/1 "JetBrains Mono"; border-radius: 50%; vertical-align: .2mm; font-style: normal; }
.ard ol.explain { margin: 0 0 3mm; padding: 0; list-style: none; display: grid; gap: 1.2mm; font-size: 8pt; line-height: 1.45; }
.ard ol.explain li { display: grid; grid-template-columns: 5mm 1fr; margin: 0; }
.ard ol.explain .mk { margin: .4mm 0 0; }
.ard .out { background: #fff; border: .4mm solid var(--ink); padding: 2mm 2.6mm; margin: 2mm 0 3.4mm; font: 400 6.8pt/1.5 "JetBrains Mono", monospace; break-inside: avoid; }
.ard .out .h { font: 700 5.6pt/1 "Silkscreen"; letter-spacing: .4pt; color: var(--muted); margin-bottom: 1.4mm; }
.ard .out pre { margin: 0; font: inherit; white-space: pre-wrap; }
.ard .out.err pre { color: #C2185B; }
.ard .note { position: relative; padding: 2.8mm 3mm 2.4mm; margin: 3mm 0 3.6mm; font-size: 7.9pt; line-height: 1.48; border: .45mm solid var(--ink); break-inside: avoid; }
.ard .note .tag { display: inline-block; margin-bottom: 1.6mm; font: 700 6.2pt/1 "Silkscreen"; letter-spacing: .4pt; padding: 1mm 1.6mm .8mm; }
.ard .note p:last-child, .ard .note ul:last-child { margin-bottom: 0; }
.ard .note.insight { background: var(--yellow); }
.ard .note.insight .tag { background: var(--ink); color: var(--yellow); }
.ard .note.fix { background: #fff; }
.ard .note.fix .tag { background: var(--pink); color: #fff; }
.ard .note.fix ul { padding-left: 3.6mm; }
.ard .note.try { background: var(--cyan); }
.ard .note.try .tag { background: var(--ink); color: var(--cyan); }
.ard .note.warn { background: #FFE0EC; }
.ard .note.warn .tag { background: #C2185B; color: #fff; }
.ard table { width: 100%; border-collapse: collapse; margin: 2mm 0 3.6mm; font-size: 7.6pt; line-height: 1.4; break-inside: avoid; }
.ard th { text-align: left; font: 700 6pt/1.2 "Silkscreen"; letter-spacing: .4pt; background: var(--ink); color: var(--paper); padding: 1.6mm 2mm 1.4mm; }
.ard td { padding: 1.4mm 2mm; border-bottom: .3mm solid #D9CBA8; vertical-align: top; }
.ard tr:nth-child(even) td { background: #FBEFD3; }
.ard .cek { list-style: none; padding: 0; }
.ard .cek li { padding-left: 5mm; position: relative; }
.ard .cek li::before { content: ""; position: absolute; left: 0; top: .9mm; width: 2.6mm; height: 2.6mm; border: .4mm solid var(--ink); background: #fff; }
.ard kbd { font: 700 6.4pt/1 "JetBrains Mono", monospace; background: #fff; border: .35mm solid var(--ink); border-bottom-width: .8mm; padding: .6mm 1.1mm .4mm; }
.ard .keep { break-inside: avoid; }
.ard .pb { break-before: page; }
.ard .sampul { page: sampul; height: 210mm; position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
.ard .depan { page: depan; break-before: page; }
.ard .toc { list-style: none; padding: 0; margin: 4mm 0 0; }
.ard .toc li { display: flex; align-items: baseline; gap: 2mm; margin: 0; padding: 1.5mm 0; border-bottom: .3mm dashed #CDBB92; }
.ard .toc li.bab { margin-top: 2.6mm; border-bottom: .45mm solid var(--ink); font-weight: 700; }
.ard .toc li .nm { font: 700 6.4pt/1 "Silkscreen"; color: var(--pink); width: 12mm; white-space: nowrap; }
.ard .toc li .tt { flex: 1; }
.ard .toc li .pg { font: 400 12pt/1 "Jersey 15"; }
.ard .toc li.sub { font-size: 7.6pt; padding-left: 12mm; }
.ard .toc li.sub .pg { font-size: 10pt; color: var(--muted); }
.ard .code:not(:has(.bar)) { padding-top: 2.8mm; }
.ard .code, .ard code, .ard .out, .ard kbd { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.ard .dd-ar { display: inline-block; width: 0; height: 0; border-left: .8mm solid transparent; border-right: .8mm solid transparent; border-top: 1mm solid currentColor; vertical-align: .3mm; margin-left: .4mm; }
.ard .sq-ic { display: inline-block; width: 1.6mm; height: 1.6mm; border: .25mm solid currentColor; vertical-align: -.1mm; }
.ard .cb { display: inline-block; width: 2mm; height: 2mm; border: .3mm solid #6B7278; vertical-align: -.3mm; }
.ard { zoom: 1.5; font: 400 8.5pt/1.56 Inter, sans-serif; color: var(--ink); overflow-wrap: break-word; }
.ard .buka { height: auto; padding: 10mm 8mm 8mm; break-before: auto; }
.ard .buka .big { font-size: 56pt; } .ard .buka h1 { font-size: 24pt; }
.ard .buka .box { position: static; margin-top: 6mm; }
.ard .isi { break-before: auto; padding-top: 2mm; }
.ard h2.sub { scroll-margin-top: 90px; flex-wrap: wrap; }
.ard h2.sub.baru { margin-top: 7mm; }
.ard table { display: block; overflow-x: auto; }
.ard figure .frame { overflow-x: auto; }
.ard .mock, .ard .isi figure { max-width: 100%; overflow-x: auto; }
@media (max-width: 760px) { .ard { zoom: 1.3; } .ard .buka .box, .ard .isi .duo { grid-template-columns: minmax(0, 1fr); } .ard .buka .big { font-size: 44pt; } }