/* paper.css , kerangka visual whitepaper work.fdiskandar.com.
   Dipakai bersama oleh SEMUA whitepaper dan SEMUA bahasanya. Versi Inggris dan
   Indonesia dari satu naskah harus terlihat identik; satu-satunya cara menjamin itu
   adalah tidak menyalin CSS-nya. Halaman demo interaktif punya gaya sendiri.
 */
  :root{
    color-scheme:light dark;
    --ground:#EDF0F3; --surface:#FFFFFF; --surface-sunk:#E4E9ED;
    --ink:#15202C; --ink-mid:#45596B; --ink-faint:#7B8C9B;
    --rule:#CFD8E0; --rule-strong:#AEBCC8;
    --accent:#0B5FA5; --accent-soft:#E2EDF7;
    --pass:#1D7A4D; --warn:#96620A; --stop:#A32630;
    --stop-soft:#FBE9EB;
    --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
    --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#10161C; --surface:#18212A; --surface-sunk:#131B22;
      --ink:#E4EBF1; --ink-mid:#A3B4C2; --ink-faint:#75899A;
      --rule:#2A3742; --rule-strong:#3B4B58;
      --accent:#4E9FE0; --accent-soft:#16283A;
      --pass:#46B67F; --warn:#D19A2E; --stop:#E0656E;
      --stop-soft:#2A1A1E;
    }
  }
  :root[data-theme="dark"]{
    --ground:#10161C; --surface:#18212A; --surface-sunk:#131B22;
    --ink:#E4EBF1; --ink-mid:#A3B4C2; --ink-faint:#75899A;
    --rule:#2A3742; --rule-strong:#3B4B58;
    --accent:#4E9FE0; --accent-soft:#16283A;
    --pass:#46B67F; --warn:#D19A2E; --stop:#E0656E;
    --stop-soft:#2A1A1E;
  }

  *{box-sizing:border-box;}
  body{margin:0;background:var(--ground);color:var(--ink);
       font-family:var(--serif);font-size:17px;line-height:1.68;
       -webkit-font-smoothing:antialiased;}
  .sheet{max-width:760px;margin:0 auto;padding:40px 26px 90px;}
  a{color:var(--accent);}
  a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

  header.doc{padding-bottom:28px;margin-bottom:44px;border-bottom:2px solid var(--ink);}
  .filed{font-family:var(--mono);font-size:11px;letter-spacing:.09em;
         text-transform:uppercase;color:var(--ink-faint);
         display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:20px;}
  .filed b{color:var(--ink-mid);font-weight:500;}
  h1{font-family:var(--sans);font-weight:700;font-size:clamp(31px,5.4vw,46px);
     line-height:1.08;letter-spacing:-.02em;margin:0 0 16px;}
  .lede{font-size:20px;color:var(--ink-mid);margin:0 0 24px;}
  .by{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
      color:var(--ink-faint);margin:0;}
  .by b{color:var(--ink-mid);font-weight:500;}

  h2{font-family:var(--sans);font-weight:700;font-size:23px;letter-spacing:-.012em;
     line-height:1.22;margin:52px 0 14px;}
  h2 .n{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.09em;
        color:var(--ink-faint);display:block;margin-bottom:7px;}
  h3{font-family:var(--sans);font-weight:600;font-size:17px;margin:32px 0 10px;}
  p{margin:0 0 17px;}
  strong{font-weight:600;}

  .abstract{background:var(--surface);border:1px solid var(--rule);
            border-left:3px solid var(--accent);padding:22px 24px;margin-bottom:14px;}
  .abstract p:last-child{margin-bottom:0;}
  .abstract p{font-size:16px;color:var(--ink-mid);}

  blockquote{margin:24px 0;padding:0 0 0 20px;border-left:3px solid var(--rule-strong);
             font-size:18.5px;color:var(--ink);}
  blockquote p{margin:0;}

  pre{font-family:var(--mono);font-size:12.5px;line-height:1.6;
      background:var(--surface);border:1px solid var(--rule);
      padding:15px 17px;overflow-x:auto;color:var(--ink-mid);margin:20px 0;}
  code{font-family:var(--mono);font-size:.87em;
       background:var(--surface-sunk);padding:1px 4px;border-radius:2px;}
  pre code{background:none;padding:0;font-size:1em;}

  table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px;}
  th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule);
        vertical-align:top;}
  th{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
     text-transform:uppercase;color:var(--ink-faint);font-weight:400;
     border-bottom:1px solid var(--rule-strong);}
  td.num{font-family:var(--mono);white-space:nowrap;}
  tr.bad td{background:var(--stop-soft);}

  .callout{border:1px solid var(--rule);background:var(--surface);
           padding:18px 20px;margin:24px 0;}
  .callout .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
              text-transform:uppercase;color:var(--stop);margin-bottom:8px;}
  .callout p:last-child{margin-bottom:0;}

  .demo-cta{display:block;text-decoration:none;border:1px solid var(--rule);
            border-left:3px solid var(--accent);background:var(--surface);
            padding:20px 22px;margin:30px 0;}
  .demo-cta:hover{background:var(--surface-sunk);}
  .demo-cta .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
               text-transform:uppercase;color:var(--ink-faint);}
  .demo-cta .t{font-family:var(--sans);font-weight:700;font-size:19px;
               color:var(--ink);margin:5px 0 6px;}
  .demo-cta .d{font-size:15px;color:var(--ink-mid);line-height:1.5;}

  ol.req{list-style:none;counter-reset:r;margin:24px 0;padding:0;
         border:1px solid var(--rule);}
  /* JANGAN pakai display:grid di <li> ini. Setiap simpul teks dan <b> di dalamnya
     jadi item grid tersendiri, lalu terbungkus jadi kolom selebar satu huruf --
     lolos semua pemeriksaan otomatis, dan cuma terlihat kalau halamannya dipandang. */
  ol.req li{counter-increment:r;position:relative;
            padding:15px 18px 15px 48px;background:var(--surface);
            font-size:15.5px;color:var(--ink-mid);}
  ol.req li + li{border-top:1px solid var(--rule);}
  ol.req li::before{content:counter(r,decimal-leading-zero);
                    position:absolute;left:18px;top:19px;
                    font-family:var(--mono);font-size:11px;color:var(--accent);}
  ol.req b{color:var(--ink);}

  footer{margin-top:64px;padding-top:24px;border-top:1px solid var(--rule);
         font-size:14px;color:var(--ink-faint);}
  footer p{margin:0 0 10px;}

  @media screen and (max-width:640px){
    body{font-size:16.5px;}
    .sheet{padding:30px 20px 70px;}
    table{font-size:14px;}
    th,td{padding:8px 8px;}
  }
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  @media print{
    body{background:#fff;font-size:10.6pt;line-height:1.5;}
    .sheet{max-width:none;padding:0;}
    h1,h2,h3{break-after:avoid;}
    pre,table,.callout,.abstract,ol.req li{break-inside:avoid;}
    .demo-cta{break-inside:avoid;}
  }

/* Penukar bahasa. Tautan biasa ke URL lain, bukan tombol yang menyembunyikan
   separuh halaman: satu URL cuma boleh punya satu nilai lang. */
.filed a.lang{color:var(--accent);text-decoration:none;
              border-bottom:1px solid var(--rule-strong);padding-bottom:1px;}
.filed a.lang:hover{border-bottom-color:var(--accent);}
@media print{ .filed a.lang{display:none;} }