:root{
    --kertas:#EFF1EE;
    --tinta:#17262E;
    --tinta-lembut:#4A5C63;
    --hijau:#2F6F5E;
    --emas:#B4862B;
    --garis:#D6DAD5;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --kertas:#111B20;
      --tinta:#E7ECE8;
      --tinta-lembut:#9FB0B3;
      --hijau:#7FC0AC;
      --emas:#D9B45E;
      --garis:#2A3B42;
    }
  }
  :root[data-theme="dark"]{
    --kertas:#111B20;
    --tinta:#E7ECE8;
    --tinta-lembut:#9FB0B3;
    --hijau:#7FC0AC;
    --emas:#D9B45E;
    --garis:#2A3B42;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--kertas);
    color:var(--tinta);
    font-family:'Karla',system-ui,-apple-system,Segoe UI,sans-serif;
    font-size:17px;
    line-height:1.65;
  }
  .laman{
    display:grid;
    grid-template-columns:minmax(260px,32%) 1fr;
    gap:0;
    max-width:1180px;
    margin:0 auto;
  }

  .kartu{
    background:#17262E;
    color:#EFF1EE;
    padding:56px 36px;
    position:sticky;
    top:0;
    align-self:start;
    min-height:100vh;
  }
  .foto{
    width:132px;height:132px;border-radius:50%;
    object-fit:cover;
    display:block;
    background:var(--hijau);
    border:3px solid rgba(255,255,255,.18);
    margin-bottom:28px;
  }
  .nama{
    font-family:'Newsreader',Georgia,serif;
    font-weight:600;
    font-size:clamp(30px,4.4vw,42px);
    line-height:1.1;
    margin:0 0 10px;
  }
  .peran{
    margin:0 0 30px;
    color:#A9BDBD;
    font-size:16px;
  }
  .kontak{list-style:none;padding:0;margin:0;font-size:15px;}
  .kontak li{padding:9px 0;border-top:1px solid rgba(255,255,255,.14);}
  .kontak a{color:#EFF1EE;text-decoration:none;border-bottom:1px solid #4E9C86;}
  .kontak a:hover{color:#7FC0AC;}

  .isi{padding:56px 40px 80px;max-width:66ch;}
  section{margin-bottom:56px;}
  h2{
    font-family:'Newsreader',Georgia,serif;
    font-weight:600;
    font-size:26px;
    margin:0 0 18px;
    padding-bottom:10px;
    border-bottom:2px solid var(--garis);
  }
  p{margin:0 0 16px;color:var(--tinta-lembut);}
  .isi p:first-of-type{color:var(--tinta);font-size:19px;}

  .prestasi{list-style:none;padding:0;margin:0;}
  .prestasi li{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:20px;
    padding:20px 0;
    border-bottom:1px dashed var(--garis);
    align-items:start;
  }
  .bukti{
    width:120px;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:4px;
    background:var(--garis);
    display:block;
  }
  .tahun{
    font-family:'Newsreader',Georgia,serif;
    font-size:17px;
    color:var(--emas);
    display:block;
    margin-bottom:2px;
  }
  .judul-prestasi{font-weight:700;display:block;}
  .ket{color:var(--tinta-lembut);font-size:15.5px;}

  @media (max-width:520px){
    .prestasi li{grid-template-columns:1fr;gap:12px;}
    .bukti{width:100%;aspect-ratio:16/9;}
  }

  .keahlian{display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:0;list-style:none;}
  .keahlian li{
    border:1px solid var(--garis);
    border-radius:99px;
    padding:5px 14px;
    font-size:15px;
  }

  footer{font-size:14px;color:var(--tinta-lembut);}

  a:focus-visible,.kontak a:focus-visible{outline:2px solid var(--hijau);outline-offset:3px;}

  @media (max-width:820px){
    .laman{grid-template-columns:1fr;}
    .kartu{position:static;min-height:0;padding:40px 24px;}
    .isi{padding:36px 24px 64px;}
  }