/* Panduan Claude Code (T-41). Warna dari brand RIS: navy logo + oranye gaya video. Oranye cuma buat
   tanda "udah"/progres & tombol utama. Teks di atas oranye selalu navy (kontras 5:1, putih cuma 3:1). */
:root {
  --latar: #F5F7FA;
  --permukaan: #FFFFFF;
  --tinta: #0F2340;
  --redup: #4A5A70;
  --garis: #D6DDE6;
  --aksen: #FF5A1F;
  --di-aksen: #0F2340;
  --tint: #FFEDE5;
  --kode-latar: #0F2340;
  --kode-teks: #EEF2F7;
  --kode-redup: #9FB0C8;
  --panel: #0F2340;
  --panel-teks: #EEF2F7;
  --panel-redup: #B5C2D4;
  --fokus: #0F2340;
  --huruf: 'Bricolage Grotesque', system-ui, sans-serif;
  --mono: 'Atkinson Hyperlegible Mono', ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) {
    --latar: #0A1322; --permukaan: #111E33; --tinta: #E6ECF4; --redup: #A4B3C7; --garis: #26364F;
    --tint: #2A1D1A; --kode-latar: #050B16; --panel: #13233D; --panel-redup: #A9B8CC; --fokus: #FFB08F; color-scheme: dark;
  }
}
:root[data-tema="gelap"] {
  --latar: #0A1322; --permukaan: #111E33; --tinta: #E6ECF4; --redup: #A4B3C7; --garis: #26364F;
  --tint: #2A1D1A; --kode-latar: #050B16; --panel: #13233D; --panel-redup: #A9B8CC; --fokus: #FFB08F; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--latar); color: var(--tinta); font: 400 17px/1.65 var(--huruf); font-optical-sizing: auto; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }
code, kbd, pre { font-family: var(--mono); }
p code, li code, dd code, summary code { font-size: .88em; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 5px; padding: .05em .35em; overflow-wrap: anywhere; }
h1, h2, h3 { line-height: 1.12; margin: 0; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.15rem); font-weight: 800; letter-spacing: -.015em; margin-bottom: .6em; }
h3 { font-size: 1.18rem; font-weight: 700; }
p { margin: 0 0 1em; }
.kecil { font-size: .92rem; color: var(--redup); }

.lompat { position: absolute; left: 16px; top: -60px; background: var(--aksen); color: var(--di-aksen); padding: 10px 14px; border-radius: 8px; font-weight: 700; z-index: 20; }
.lompat:focus { top: 12px; }

/* ---------- kepala ---------- */
.kepala { max-width: 1180px; margin: 0 auto; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.merek { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; text-decoration: none; letter-spacing: -.01em; }
.merek img { width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.ganti-tema { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--garis); border-radius: 999px; background: var(--permukaan); color: var(--tinta); font: 500 .95rem var(--huruf); cursor: pointer; }
.ganti-tema:hover { border-color: var(--tinta); }

/* ---------- pembuka: judul + pilih jalur ---------- */
.pembuka { max-width: 1180px; margin: 0 auto; padding: 24px 20px 56px; display: grid; gap: 40px; }
h1 { font-size: clamp(2.35rem, 1.4rem + 4.6vw, 4.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; max-width: 14ch; margin-bottom: 20px; }
.lead { font-size: clamp(1.08rem, 1rem + .4vw, 1.25rem); max-width: 34em; color: var(--redup); }
.fakta-singkat { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--garis); }
.fakta-singkat div { display: grid; }
.fakta-singkat dt { font-size: .85rem; color: var(--redup); }
.fakta-singkat dd { margin: 0; font-weight: 700; }

.garpu { background: var(--panel); color: var(--panel-teks); border-radius: 20px; padding: 26px 20px 22px; align-self: start; }
.garpu-judul { font-size: 1.5rem; margin-bottom: 6px; }
.garpu-ket { color: var(--panel-redup); font-size: .98rem; margin-bottom: 18px; }
.jalur-pilih { display: grid; gap: 12px; }
.jalur { position: relative; display: grid; gap: 4px; text-align: left; width: 100%; padding: 16px 16px 16px 54px; border: 1.5px solid rgba(238, 242, 247, .28); border-radius: 14px; background: transparent; color: inherit; font: inherit; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.jalur::before { content: ""; position: absolute; left: 18px; top: 19px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid currentColor; }
.jalur:hover { border-color: rgba(238, 242, 247, .7); }
.jalur[aria-checked="true"] { background: #FFFFFF; color: #0F2340; border-color: #FFFFFF; }
.jalur[aria-checked="true"]::before { border-color: #0F2340; background: radial-gradient(circle, var(--aksen) 0 5px, transparent 5.5px); }
.jalur:focus-visible { outline-color: var(--aksen); }
.jalur-nama { font-weight: 800; font-size: 1.12rem; }
.jalur-ket { font-size: .95rem; line-height: 1.5; opacity: .85; }
.jalur-meta { font-size: .85rem; font-weight: 700; opacity: .75; }
.garpu-saran { margin: 16px 0 0; font-size: .92rem; color: var(--panel-redup); }

/* ---------- badan: rel progres + isi ---------- */
.badan { max-width: 1180px; margin: 0 auto; padding: 0 20px 96px; }
.isi { min-width: 0; max-width: 42rem; }
.isi > section { padding-top: 64px; }
.isi > section:first-child { padding-top: 8px; }

/* HP: rel progres jadi bar nempel di bawah layar (kejangkau jempol, gak nutup judul) */
.rel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--permukaan); border-top: 1px solid var(--garis); padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); }
.rel-dalam { max-width: 42rem; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; }
.rel-judul, .daftar-isi, .rel-reset { display: none; }
.rel-angka { margin: 0; font-weight: 700; font-size: .95rem; grid-column: 1; }
.rel-bar { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--garis); overflow: hidden; }
.rel-bar span { display: block; height: 100%; width: 0; background: var(--aksen); border-radius: inherit; transition: width .35s ease; }
body { padding-bottom: 72px; }

@media (min-width: 1000px) {
  .pembuka { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; padding-top: 48px; padding-bottom: 88px; align-items: start; }
  .garpu { padding: 30px 26px 26px; margin-top: 12px; }
  .badan { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; }
  .rel { position: static; background: none; border: 0; padding: 0; }
  .rel-dalam { position: sticky; top: 24px; display: block; }
  .rel-judul { display: block; font-size: .9rem; color: var(--redup); margin: 8px 0 2px; }
  .rel-angka { font-size: 1.05rem; margin-bottom: 10px; }
  .daftar-isi { display: block; list-style: none; margin: 24px 0 0; padding: 0; border-left: 1px solid var(--garis); }
  .daftar-isi a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; color: var(--redup); font-size: .95rem; line-height: 1.35; }
  .daftar-isi a:hover { color: var(--tinta); }
  .daftar-isi a[aria-current="true"] { color: var(--tinta); font-weight: 700; border-left-color: var(--tinta); }
  .rel-reset:not([hidden]) { display: inline-block; margin-top: 20px; background: none; border: 0; padding: 8px 0; color: var(--redup); font: 400 .88rem var(--huruf); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
  body { padding-bottom: 0; }
}

/* ---------- perbandingan ---------- */
.banding { margin: 28px 0 0; border-top: 2px solid var(--tinta); }
.banding-baris { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--garis); }
.banding-baris > span:nth-child(2) { color: var(--redup); }
.banding-baris > span:nth-child(3) { font-size: .92rem; font-weight: 700; }
.kepala-banding { display: none; }
.banding-baris.sorot { background: var(--tint); margin: 0 -12px; padding: 14px 12px; border-radius: 10px; border-bottom-color: transparent; }
@media (min-width: 640px) {
  .banding-baris { grid-template-columns: 11rem 1fr 9rem; gap: 20px; align-items: baseline; }
  .kepala-banding { display: grid; font-size: .85rem; color: var(--redup); padding: 10px 0; }
  .kepala-banding > span:nth-child(3) { font-weight: 400; }
}

/* ---------- syarat ---------- */
.syarat { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 12px; }
.syarat li { position: relative; padding-left: 28px; }
.syarat li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 12px; border: 2px solid var(--tinta); border-radius: 3px; }
.awas { border: 2px solid var(--tinta); border-radius: 12px; padding: 14px 16px; background: var(--permukaan); }

/* ---------- langkah ---------- */
.langkah-kepala { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; margin-bottom: 12px; }
.langkah-kepala h2 { margin-bottom: 0; }
.langkah-jalur { margin: 0; color: var(--redup); font-size: .95rem; }
.langkah-jalur b { color: var(--tinta); }
.js [data-jalur-aktif="desktop"] .langkah[data-jalur="terminal"],
.js [data-jalur-aktif="terminal"] .langkah[data-jalur="desktop"] { display: none; }
html:not(.js) .langkah-jalur { display: none; }
html:not(.js) .langkah::before { content: attr(aria-label); display: block; font-weight: 800; font-size: 1.2rem; margin: 24px 0 8px; }
.langkah { list-style: none; margin: 0; padding: 0; counter-reset: l; }
.l { counter-increment: l; position: relative; padding: 24px 0 20px 56px; border-top: 1px solid var(--garis); }
.l::before { content: counter(l); position: absolute; left: 0; top: 22px; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--tinta); display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; transition: background-color .2s, color .2s, border-color .2s; }
.l.udah::before { content: ""; background: var(--aksen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230F2340' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; border-color: var(--aksen); }
.l-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; min-height: 40px; }
.l-kepala h3 { padding-top: 7px; }
.centang { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 10px; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); font-size: .92rem; font-weight: 500; cursor: pointer; user-select: none; }
.centang:hover { border-color: var(--tinta); }
.centang input { appearance: none; -webkit-appearance: none; margin: 0; width: 20px; height: 20px; border: 2px solid var(--tinta); border-radius: 5px; display: grid; place-items: center; cursor: pointer; }
.centang input:checked { background: var(--aksen); border-color: var(--aksen); }
.centang input:checked::after { content: ""; width: 10px; height: 6px; border: solid var(--di-aksen); border-width: 0 0 3px 3px; transform: translateY(-1px) rotate(-45deg); }
.centang:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }
.centang input:focus-visible { outline: none; }
.unduh, .os-cara { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 8px; }
.unduh li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.unduh a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.unduh span { color: var(--redup); font-size: .92rem; }
.mode { margin: 0 0 1.2em; display: grid; gap: 10px; }
.mode div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--garis); }
.mode dt { font-weight: 700; }
.mode dd { margin: 0; color: var(--redup); }
.mode dd b { color: var(--tinta); }
.selesai { margin-top: 8px; border-radius: 14px; background: var(--tint); padding: 16px 18px; }
.selesai p { margin: 0; }

/* ---------- blok perintah ---------- */
.perintah { position: relative; background: var(--kode-latar); color: var(--kode-teks); border-radius: 14px; margin: 4px 0 18px; overflow: hidden; }
.perintah pre { margin: 0; padding: 16px 92px 16px 18px; overflow-x: auto; font-size: .95rem; line-height: 1.6; white-space: pre; }
.perintah.tunggal pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.os-tab { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid rgba(238, 242, 247, .14); overflow-x: auto; }
.os-tab button { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 9px 9px 0 0; background: transparent; color: var(--kode-redup); font: 500 .92rem var(--huruf); cursor: pointer; }
.os-tab button[aria-selected="true"] { color: var(--kode-teks); background: rgba(238, 242, 247, .1); box-shadow: inset 0 -2px 0 var(--aksen); }
.os-tab button:focus-visible { outline-color: var(--aksen); outline-offset: -3px; }
.js .os-isi:not(.aktif) { display: none; }
html:not(.js) .os-tab { display: none; }
html:not(.js) .os-isi { position: relative; border-top: 1px solid rgba(238, 242, 247, .14); }
html:not(.js) .os-isi::before { content: attr(aria-label); display: block; padding: 10px 18px 0; color: var(--kode-redup); font: 500 .85rem var(--huruf); }
.os-isi { position: relative; }
.salin { position: absolute; top: 10px; right: 10px; min-height: 36px; min-width: 64px; padding: 0 12px; border: 1px solid rgba(238, 242, 247, .3); border-radius: 8px; background: transparent; color: var(--kode-teks); font: 500 .88rem var(--huruf); cursor: pointer; }
.salin:hover { background: rgba(238, 242, 247, .1); }
.salin:focus-visible { outline-color: var(--aksen); }
.salin.ok { background: var(--aksen); color: var(--di-aksen); border-color: var(--aksen); }
html:not(.js) .salin { display: none; }
.berkas-nama { margin: 0; padding: 12px 18px 0; font: 700 .9rem var(--mono); }
.berkas-nama span { font-family: var(--huruf); font-weight: 400; color: var(--kode-redup); }
.berkas .salin { top: 8px; }
.berkas pre { white-space: pre-wrap; padding-top: 10px; }

/* ---------- pintasan & tips ---------- */
.pintasan { margin: 18px 0 0; border-top: 1px solid var(--garis); }
.pintasan div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--garis); align-items: baseline; }
.pintasan dt { white-space: nowrap; }
.pintasan dd { margin: 0; color: var(--redup); }
kbd { display: inline-block; font-size: .85rem; padding: .1em .45em; border: 1px solid var(--garis); border-bottom-width: 2px; border-radius: 6px; background: var(--permukaan); color: var(--tinta); }
.sub { margin: 40px 0 12px; font-size: 1.3rem; }
.tips { margin: 0; padding-left: 1.3em; display: grid; gap: 12px; }
.tips li::marker { font-weight: 800; }

/* ---------- kalau macet ---------- */
.tanya { border-top: 1px solid var(--garis); }
.tanya details { border-bottom: 1px solid var(--garis); }
.tanya summary { list-style: none; cursor: pointer; padding: 15px 36px 15px 0; position: relative; font-weight: 700; line-height: 1.4; min-height: 44px; }
.tanya summary::-webkit-details-marker { display: none; }
.tanya summary::after { content: ""; position: absolute; right: 6px; top: 21px; width: 9px; height: 9px; border: solid var(--tinta); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
.tanya details[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.tanya details p { color: var(--redup); padding-right: 8px; }

/* ---------- penutup ---------- */
.isi > section.lanjut { margin-top: 72px; padding: 32px 24px; background: var(--panel); color: var(--panel-teks); border-radius: 20px; }
.lanjut p { color: var(--panel-redup); max-width: 34em; }
.lanjut p:last-child { margin: 0; }
.tombol { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 12px; font-weight: 700; text-decoration: none; }
.tombol-nanti { border: 2px dashed rgba(238, 242, 247, .45); color: var(--panel-teks); cursor: default; }

.kaki { max-width: 1180px; margin: 0 auto; padding: 32px 20px 40px; border-top: 1px solid var(--garis); color: var(--redup); font-size: .9rem; }
.kaki p { max-width: 42rem; margin-bottom: .4em; }

.toast { position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 12px); margin: 0; padding: 10px 16px; border-radius: 10px; background: var(--tinta); color: var(--latar); font-weight: 500; font-size: .95rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 30; }
.toast.tampil { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1000px) { .toast { bottom: 28px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* blok perintah ada di dalam <li> langkah: gaya code sebaris gak boleh kebawa ke sini */
.perintah code { background: none; border: 0; padding: 0; border-radius: 0; font-size: inherit; color: inherit; overflow-wrap: normal; }
.perintah.tunggal code, .berkas code { overflow-wrap: anywhere; }
h1 span { display: block; }
.unduh { gap: 0; }
@media (max-width: 999px) {
  .fakta-singkat { gap: 6px 20px; margin-top: 20px; padding-top: 14px; }
  .fakta-singkat div { display: flex; gap: 6px; align-items: baseline; }
  .fakta-singkat dt::after { content: ":"; }
  .pembuka { gap: 28px; }
}
/* perintah panjang dibungkus, biar gak lewat di bawah tombol Salin (yang disalin tetap teks aslinya) */
.perintah pre { white-space: pre-wrap; }
.perintah code { overflow-wrap: anywhere; }
/* penanda syarat: garis pendek, bukan kotak (kotak kebaca kayak bisa dicentang) */
.syarat li::before { top: .8em; width: 12px; height: 0; border: 0; border-top: 2.5px solid var(--tinta); border-radius: 2px; }
.berkas-nama { padding-right: 92px; }
.tombol-utama { background: var(--aksen); color: var(--di-aksen); }
.tombol-utama:hover { background: #FF7440; }
.lanjut .tombol-utama:focus-visible { outline-color: var(--aksen); }

/* ---------- Part 2 & menu bagian ---------- */
.kepala { flex-wrap: wrap; }
.bagian { order: 3; flex: 1 0 100%; display: flex; gap: 6px; }
.bagian a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--garis); border-radius: 10px; text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--redup); background: var(--permukaan); }
.bagian a span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; font-size: .78rem; font-weight: 800; }
.bagian a:hover { color: var(--tinta); border-color: var(--tinta); }
.bagian a[aria-current="page"] { color: var(--latar); background: var(--tinta); border-color: var(--tinta); }
@media (min-width: 720px) {
  .bagian { order: 0; flex: 0 1 auto; }
  .bagian a { flex: none; }
}
.prasyarat { margin-top: 18px; }
.peta { margin: 0; background: var(--panel); color: var(--panel-teks); border-radius: 20px; padding: 26px 20px 22px; align-self: start; }
.peta .garpu-judul { display: block; margin-bottom: 18px; font-weight: 800; line-height: 1.12; }
.peta-alur { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.peta-alur li { position: relative; display: grid; gap: 4px; padding: 14px 16px 14px 16px; border: 1.5px solid rgba(238, 242, 247, .28); border-radius: 14px; }
.peta-alur li + li { margin-top: 34px; }
.peta-alur li + li::before { content: ""; position: absolute; left: 50%; top: -30px; height: 26px; border-left: 2px dashed rgba(238, 242, 247, .45); }
.peta-alur b { font-size: 1.08rem; }
.peta-alur span { font-size: .93rem; color: var(--panel-redup); line-height: 1.5; }
.peta-alur .peta-inti { background: #FFFFFF; border-color: #FFFFFF; color: #0F2340; }
.peta-alur .peta-inti span { color: #4A5A70; }
.peta-alur code { font-size: .88em; background: rgba(15, 35, 64, .08); border-radius: 4px; padding: 0 .3em; }
.peta-alur li:not(.peta-inti) code { background: rgba(238, 242, 247, .14); }
@media (min-width: 1000px) { .peta { padding: 30px 26px 26px; margin-top: 12px; } }
.banding-2 .banding-baris > span:nth-child(3) { font-weight: 700; font-size: 1rem; }
@media (min-width: 640px) { .banding-2 .banding-baris { grid-template-columns: 9rem 1fr 1fr; } }
.langkah-sub { margin: 18px 0 8px; }
.urut { margin: 0 0 1em; padding-left: 1.3em; display: grid; gap: 8px; }
.urut li::marker { font-weight: 800; }
.opsional { margin: 8px 0 12px; border: 1px solid var(--garis); border-radius: 12px; background: var(--permukaan); }
.opsional summary { cursor: pointer; padding: 12px 16px; font-weight: 700; min-height: 44px; }
.opsional > :not(summary) { margin-left: 16px; margin-right: 16px; }
.opsional > :last-child { margin-bottom: 16px; }
.ke-part2 { border-top: 2px solid var(--tinta); margin-top: 64px; }
.isi > section.ke-part2 { padding-top: 28px; }
.ke-part2 h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); }
.tombol-garis { border: 2px solid var(--tinta); color: var(--tinta); }
.tombol-garis:hover { background: var(--tinta); color: var(--latar); }
.isi > section.ke-part2 + section.lanjut { margin-top: 40px; }
.tanya details .perintah { margin-right: 8px; }
.tombol { padding: 10px 22px; line-height: 1.3; text-align: center; }
@media (max-width: 559px) {
  /* HP: tombol Salin di atas blok, perintah dapet lebar penuh */
  .perintah pre { padding: 50px 16px 14px; }
  .os-isi pre { padding-top: 50px; }
  .berkas-nama { padding-right: 92px; min-height: 46px; }
  .berkas pre { padding-top: 6px; }
  .opsional > :not(summary) { margin-left: 12px; margin-right: 12px; }
  .l { padding-left: 48px; }
  .l::before { width: 34px; height: 34px; }
}