.v1{
  --brand:var(--biru);
  --brand-hi:var(--biru-2);
  --brand-050:#eef3f9;
  --brand-100:#c9dcee;
  --accent:var(--merah);
  --accent-hi:var(--merah-2);
  --accent-050:#fcedee;
  --accent-100:#f0c7ca;
  --accent-soft:#fcedee;
  --line:var(--rule);
  --line-soft:var(--rule-2);
  --surface:var(--paper);
  --surface-alt:var(--paper-2);
  --text:#2c3038;
  --muted:var(--ink-2);
  --radius:12px;
  --pad:max(var(--gut), calc((100% - 1560px) / 2 + var(--gut)));
  --font-d:var(--d);
  --font-b:var(--b);
  font-family:var(--b);
  color:var(--text);
  font-size:15px;
  line-height:1.65;
}
.v1 h1,.v1 h2,.v1 h3,.v1 h4{font-family:var(--d);color:var(--ink);margin:0;text-wrap:balance}

/* Beberapa nama kelas dipakai oleh kedua sistem gaya.
   Blok ini menetralkan sifat bawaan desain 2 yang ikut terbawa
   ke dalam .v1, supaya tata letak kartu beranda tidak terganggu. */
.v1 .row{border-bottom:0;padding:0;gap:0}
.v1 .pillar{border-top:0;padding-top:0}
.v1 .gal{background:transparent;border:0}
.v1 .pillar .tag{border:0;padding:0;font-family:var(--font-b);font-size:inherit;
  letter-spacing:normal;text-transform:none;color:inherit}
.v1 .rows,.v1 .proc{border-top:0}
.v1 .step{flex:1}


.v1 h1, .v1 h2, .v1 h3, .v1 h4{font-family:var(--font-d);color:var(--ink);margin:0;text-wrap:balance}
.v1 h1{font-size:48px;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.v1 h2{font-size:36px;font-weight:700;line-height:1.18;letter-spacing:-.015em}
.v1 h3{font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.v1 h4{font-size:17px;font-weight:700;line-height:1.35}
.v1 .section{padding:80px var(--pad)}
.v1 .section.alt{background:var(--surface-alt)}
.v1 .badge{display:inline-flex;align-items:center;height:31px;padding:0 16px;border-radius:999px;
    background:var(--accent-050);border:1px solid var(--accent-100);color:var(--accent);
    font-size:11px;font-weight:600;letter-spacing:.012em;}
.v1 .head{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;margin-bottom:48px}
.v1 .head p{color:var(--muted);max-width:78ch}
.v1 .head.left{align-items:flex-start;text-align:left}
.v1 .head h2, .v1 .cta-inner h2{position:relative;padding-bottom:15px}
.v1 .head h2::after, .v1 .cta-inner h2::after{content:"";position:absolute;left:50%;bottom:0;
    transform:translateX(-50%);width:46px;height:3px;border-radius:2px;background:var(--accent)}
.v1 .head.left h2::after{left:0;transform:none}
.v1 .ill{display:block;width:100%;height:auto;border-radius:var(--radius);overflow:hidden;
    background:#e9edf1;aspect-ratio:4/3;border:1px solid var(--line);object-fit:cover}
.v1 .ill.photo{display:grid;place-items:center;color:#7c8794;background:#e9edf1}
.v1 .ill.photo svg{width:40px;height:40px;stroke-width:1.3}
.v1 .hero{display:grid;grid-template-columns:664fr 600fr;gap:48px;align-items:center;
    padding:96px var(--pad)}
.v1 .hero h1{margin:22px 0 0}
.v1 .hero p{color:var(--muted);font-size:16px;margin-top:20px;max-width:62ch}
.v1 .hero .actions{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap}
.v1 .phero{padding:64px var(--pad) 56px;border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,var(--brand-050) 0%,#fff 100%)}
.v1 .crumb{font-size:12.5px;color:var(--muted);margin-bottom:20px;display:flex;gap:8px;align-items:center}
.v1 .crumb span{color:var(--brand);font-weight:600}
.v1 .phero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center}
.v1 .phero h1{font-size:42px}
.v1 .phero p.lede{color:var(--muted);font-size:16.5px;margin-top:18px;max-width:60ch}
.v1 .phero .actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.v1 .grid{display:grid;gap:24px}
.v1 .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.v1 .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.v1 .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.v1 .g5{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.v1 .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:24px;display:flex;flex-direction:column;gap:12px}
.v1 .card p{color:var(--muted);font-size:14px}
.v1 .icon{width:48px;height:48px;border-radius:12px;background:var(--brand);
    display:grid;place-items:center;color:#fff;flex:none}
.v1 .icon svg{width:24px;height:24px}
.v1 .vcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;
    display:flex;flex-direction:column;gap:16px}
.v1 .vcard .row{display:flex;align-items:center;justify-content:space-between}
.v1 .vcard .num{font-family:var(--font-d);font-weight:800;font-size:16px;color:var(--accent);
    font-variant-numeric:tabular-nums}
.v1 .vcard h3{font-size:20px}
.v1 .vcard p{color:var(--muted);font-size:14px}
.v1 .pillars{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:0;align-items:center}
.v1 .pillar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.v1 .pillar .ill{border:0;border-radius:0;aspect-ratio:384/200}
.v1 .pillar .body{padding:24px}
.v1 .pillar .tag{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.v1 .pillar .tag i{width:28px;height:28px;border-radius:50%;background:var(--accent-050);color:var(--accent);
    display:grid;place-items:center;font-style:normal;font-family:var(--font-d);font-weight:700;font-size:13px}
.v1 .pillar .tag span{font-size:11px;font-weight:600;letter-spacing:.012em;color:var(--muted);}
.v1 .pillar h3{font-size:22px;font-weight:800;letter-spacing:.01em}
.v1 .pillar p{color:var(--muted);font-size:14px;margin-top:12px}
.v1 .flowarrow{width:32px;height:32px;margin:0 12px;color:var(--brand-100)}
.v1 .scard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.v1 .scard .icon{width:56px;height:56px;border-radius:14px;background:var(--accent);color:#fff;margin-bottom:20px}
.v1 .scard .icon svg{width:26px;height:26px}
.v1 .scard h3{font-size:21px}
.v1 .scard p{color:var(--muted);font-size:14px;margin-top:14px}
.v1 .steps{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.v1 .step{border:1px solid var(--line);border-radius:12px;padding:18px;background:#fff;
    display:flex;flex-direction:column;gap:10px}
.v1 .step .n{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;
    display:grid;place-items:center;font-family:var(--font-d);font-weight:700;font-size:15px}
.v1 .step h4{font-size:15.5px;letter-spacing:-.005em}
.v1 .step p{font-size:12.5px;color:var(--muted);line-height:1.55}
.v1 .conn{width:20px;height:20px;flex:none;align-self:center;color:var(--brand)}
.v1 .stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:64px var(--pad);
    background:#fff}
.v1 .stat{text-align:center;border-right:1px solid var(--line)}
.v1 .stat:last-child{border-right:0}
.v1 .stat b{display:block;font-family:var(--font-d);font-size:48px;font-weight:800;color:var(--brand);
    letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.v1 .stat span{font-size:14px;color:var(--muted)}
.v1 .team{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.v1 .team .ill{border:0;border-radius:0;aspect-ratio:4/5}
.v1 .team .body{padding:20px}
.v1 .team h4{font-size:18px}
.v1 .team .role{font-size:13.5px;color:var(--muted);margin-top:2px}
.v1 .team .cert{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);
    margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.v1 .team .cert svg{width:14px;height:14px;color:var(--brand);flex:none}
.v1 .tcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;
    display:flex;flex-direction:column;gap:24px}
.v1 .tcard .q{width:36px;height:36px;color:var(--brand-100)}
.v1 .tcard blockquote{margin:0;font-size:15px;color:var(--text);line-height:1.7}
.v1 .tcard .who strong{display:block;font-family:var(--font-d);font-weight:700;font-size:16px;color:var(--ink)}
.v1 .tcard .who span{font-size:13px;color:var(--muted)}
.v1 .gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.v1 .gal .ill{aspect-ratio:424/240}
.v1 .split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center}
.v1 .split.rev .ill{order:2}
.v1 .rich p{color:var(--muted)}
.v1 .rich p+p{margin-top:14px}
.v1 .checklist{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.v1 .checklist li{display:flex;gap:10px;font-size:14px;color:var(--text)}
.v1 .checklist svg{width:18px;height:18px;color:var(--brand);flex:none;margin-top:3px}
.v1 .kv{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.v1 .kv div{display:flex;justify-content:space-between;gap:24px;padding:14px 20px;font-size:14px;
    border-bottom:1px solid var(--line-soft)}
.v1 .kv div:last-child{border-bottom:0}
.v1 .card .kv div{padding:9px 0;font-size:13.5px}
.v1 .kv b{color:var(--accent);font-weight:700;font-family:var(--font-d);min-width:18px;font-variant-numeric:tabular-nums}
.v1 .kv div{justify-content:flex-start;gap:16px}
.v1 .kv strong{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.v1 .tl li{display:grid;grid-template-columns:96px 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--line)}
.v1 .tl li:last-child{border-bottom:1px solid var(--line)}
.v1 .tl .yr{font-family:var(--font-d);font-weight:800;font-size:19px;color:var(--brand);
    font-variant-numeric:tabular-nums}
.v1 .tl p{font-size:14px;color:var(--muted);margin-top:4px}
.v1 .chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;justify-content:center}
.v1 .chip{font:inherit;font-size:13px;font-weight:600;padding:8px 16px;border-radius:999px;cursor:pointer;
    background:#fff;border:1px solid var(--line);color:var(--muted)}
.v1 .chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.v1 .chip:hover:not([aria-pressed="true"]){border-color:var(--brand-100);color:var(--brand)}
.v1 .doc{display:flex;gap:16px;align-items:flex-start;padding:20px;border:1px solid var(--line);
    border-radius:12px;background:#fff}
.v1 .doc .icon{width:42px;height:42px;border-radius:10px}
.v1 .doc .icon svg{width:20px;height:20px}
.v1 .doc h4{font-size:15px}
.v1 .doc p{font-size:13px;color:var(--muted);margin-top:2px}
.v1 .doc .meta{font-size:12px;color:var(--muted);margin-top:8px}
.v1 .form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.v1 .field{display:flex;flex-direction:column;gap:7px}
.v1 .field.full{grid-column:1/-1}
.v1 .field label{font-size:13px;font-weight:600;color:var(--ink)}
.v1 .field label .opt{font-weight:400;color:var(--muted)}
.v1 .field .hint{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:3px}
.v1 .field input, .v1 .field select, .v1 .field textarea{font:inherit;font-size:14px;color:var(--text);background:#fff;
    border:1px solid var(--line);border-radius:10px;padding:11px 13px;width:100%}
.v1 .field textarea{min-height:110px;resize:vertical}
.v1 .field input::placeholder, .v1 .field textarea::placeholder{color:#78838f}
.v1 .form-note{font-size:12.5px;color:var(--muted);grid-column:1/-1}
.v1 .contact-card{display:flex;gap:14px;align-items:flex-start;padding:22px;border:1px solid var(--line);
    border-radius:12px;background:#fff}
.v1 .contact-card .icon{width:40px;height:40px;border-radius:10px}
.v1 .contact-card .icon svg{width:19px;height:19px}
.v1 .contact-card h4{font-size:14px}
.v1 .contact-card p{font-size:14px;color:var(--muted);margin-top:3px}
.v1 .contact-card .sub{font-size:12.5px;color:var(--muted);margin-top:6px}
.v1 .faq{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}
.v1 .faq details{border-bottom:1px solid var(--line-soft)}
.v1 .faq details:last-child{border-bottom:0}
.v1 .faq summary{padding:18px 22px;cursor:pointer;font-family:var(--font-d);font-weight:700;font-size:15.5px;
    color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.v1 .faq summary::-webkit-details-marker{display:none}
.v1 .faq summary::after{content:"+";color:var(--accent);font-size:20px;font-weight:600;line-height:1}
.v1 .faq details[open] summary::after{content:"–"}
.v1 .faq p{padding:0 22px 20px;color:var(--muted);font-size:14px;max-width:80ch}
.v1 .cta{background:var(--ink);padding:100px var(--pad);text-align:center}
.v1 .cta h2{color:#fff}
.v1 .cta p{color:#b9cbdd}
.v1 .cta .badge{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26);color:#eebdc0}
.v1 .cta .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.38)}
.v1 .cta .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.v1 .cta-inner{max-width:800px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px}
.v1 .cta h2{font-size:40px}
.v1 .cta p{color:var(--muted);max-width:66ch}
.v1 .cta .actions{display:flex;gap:16px;justify-content:center;margin-top:16px;flex-wrap:wrap}
@media (max-width:1180px){
  .v1 .g5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v1 .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .v1 .conn{display:none}
  .v1 .g4, .v1 .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v1 h1{font-size:38px}
  .v1 h2{font-size:30px}
  .v1 .cta h2{font-size:32px}
}
@media (max-width:900px){
  .v1 .hero{grid-template-columns:1fr;gap:32px;padding:48px var(--pad)}
  .v1 .phero-grid, .v1 .split{grid-template-columns:1fr;gap:32px}
  .v1 .split.rev .ill, .v1 .split.rev img.ill{order:-1}
  .v1 .pillars{grid-template-columns:1fr;gap:20px}
  .v1 .flowarrow{display:none}
  .v1 .pillar .ill{aspect-ratio:16/7}
  .v1 .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v1 .g5, .v1 .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v1 .section{padding:56px var(--pad)}
  .v1 .head{margin-bottom:36px}
  .v1 h1{font-size:34px}
  .v1 h2{font-size:27px}
  .v1 .cta h2{font-size:28px}
}
@media (max-width:680px){
  .v1 .g2, .v1 .g3, .v1 .g4, .v1 .g5, .v1 .gal, .v1 .form{grid-template-columns:1fr}
  .v1 .steps{grid-template-columns:1fr}
  .v1 .section{padding:44px var(--pad)}
  .v1 .cta{padding:52px var(--pad)}
  .v1 .phero{padding:28px var(--pad) 36px}
  .v1 .hero{padding:28px var(--pad) 36px}
  .v1 .card, .v1 .vcard, .v1 .scard, .v1 .tcard{padding:20px}
  .v1 .contact-card{padding:18px}
  .v1 h1{font-size:28px;line-height:1.15}
  .v1 h2{font-size:23px}
  .v1 .cta h2{font-size:23px}
  .v1 .phero h1{font-size:27px}
  .v1 h3{font-size:18px}
  .v1 .hero p, .v1 .phero p.lede{font-size:15px}
  .v1 .actions{width:100%}
  .v1 .head{margin-bottom:28px}
  .v1 .head p{font-size:14px}
  .v1 .pillar .ill{aspect-ratio:16/9}
  .v1 .team .ill{aspect-ratio:4/5}
  .v1 .stat-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 0;padding:36px var(--pad)}
  .v1 .stat:nth-child(2){border-right:0}
  .v1 .stat b{font-size:36px}
  .v1 .kv div{flex-wrap:wrap;padding:12px 16px}
  .v1 .faq summary{padding:16px 18px;font-size:15px}
  .v1 .faq p{padding:0 18px 16px}
  .v1 .field input, .v1 .field select, .v1 .field textarea{font-size:16px;padding:13px 14px}
  .v1 .form{gap:14px}
  .v1 .tl li{grid-template-columns:1fr;gap:6px}
}
@media (max-width:420px){
  .v1 h1{font-size:26px}
  .v1 .phero h1{font-size:25px}
}
.v1 .field.invalid input, .v1 .field.invalid select{border-color:var(--accent);background:#fffafa}
.v1 .field .err{display:none;font-size:12px;color:var(--accent);font-weight:500}
.v1 .field.invalid .err{display:block}

/* Pita ajakan beranda: biru logo, bukan hitam.
   --ink pada sistem desain 2 bernilai mendekati hitam, jadi
   warnanya ditetapkan ulang di sini beserta isi di atasnya. */
.v1 .cta{background:var(--biru)}
.v1 .cta h2{color:#fff}
.v1 .cta p{color:#c3d5ea}
.v1 .cta .badge{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#f0b9bc}
.v1 .cta .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.v1 .cta .btn-line:hover{background:#fff;color:var(--biru);border-color:#fff}

/* Kartu anggota tim: tambahan baris tugas di bawah jabatan. */
.v1 .team .tugas{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.6}
.v1 .team .body{display:flex;flex-direction:column}
.v1 .team .cert{margin-top:auto}
.v1 .team{display:flex;flex-direction:column}
.v1 .team .ill{flex:none}

/* Judul kartu memakai h3 agar urutan heading tidak melompat dari h2 ke h4,
   tetapi ukurannya tetap seperti semula. */
.v1 .ch{font-size:17px;font-weight:700;line-height:1.35;letter-spacing:-.005em}
.v1 .team .ch{font-size:18px}
.v1 .step .sh{font-size:15.5px;font-weight:700;line-height:1.35;letter-spacing:-.005em}

/* =========================================================
   Kartu berita di beranda (gaya kartu desain 1).
   Isi diisi oleh assets/js/berita.js dari admin panel.
   ========================================================= */
.v1 .bcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:border-color .18s ease}
.v1 .bcard:hover{border-color:var(--brand-100)}
.v1 .bcard .ill{border:0;border-radius:0;aspect-ratio:16/9;flex:none}
.v1 .bcard .bbody{padding:20px;display:flex;flex-direction:column;gap:9px}
.v1 .bcard .bmeta{font-size:11px;font-weight:600;letter-spacing:.012em;
  color:var(--accent)}
.v1 .bcard .ch{font-size:17.5px;transition:color .18s ease}
.v1 .bcard:hover .ch{color:var(--brand)}
.v1 .bcard p{color:var(--muted);font-size:14px}
.v1 .berita-aksi{display:flex;justify-content:center;margin-top:32px}

/* =========================================================
   Kartu pengurus: tampilan yang lebih tegas.
   - Jabatan jadi label huruf mono kapital, bukan teks isi biasa,
     mengikuti gaya label di halaman lain.
   - Garis tipis memisahkan foto dari keterangan, dan keterangan
     dari uraian tugas.
   - Tinggi nama dikunci dua baris supaya baris jabatan sejajar
     di semua kartu, berapa pun panjang namanya.
   ========================================================= */
.v1 .team .body{border-top:1px solid var(--line);padding:18px 20px 20px}
.v1 .team .ch{font-size:16.5px;line-height:1.3;min-height:43px;
  display:flex;align-items:flex-start;letter-spacing:-.01em}
.v1 .team .role{font-family:var(--m);font-size:10.5px;font-weight:500;
  letter-spacing:.012em;color:var(--brand);margin-top:0}
.v1 .team .tugas{font-size:13px;line-height:1.65;color:var(--muted);
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
@media (max-width:680px){
  .v1 .team .ch{min-height:0}
}

/* Ilustrasi diagram pada hero halaman Tim. Dipasang sebagai SVG
   sebaris supaya ikut memakai huruf situs dan tajam di layar mana pun. */
.v1 .ill.ilus{display:block;padding:0;background:#fbfbfa;overflow:hidden}
.v1 .ill.ilus svg{display:block;width:100%;height:100%}
.v1 .ilus .dl{font-family:var(--m);font-size:11px;font-weight:500;letter-spacing:.01em;fill:#b5121b}
.v1 .ilus .dj{font-family:var(--m);font-size:11.5px;font-weight:600;letter-spacing:.01em;fill:#111417}
.v1 .ilus .dn{font-family:var(--m);font-size:11.5px;font-weight:600;letter-spacing:.01em;fill:#12467e}
.v1 .ilus .dm{font-family:var(--m);font-size:11.5px;font-weight:500;letter-spacing:.01em;fill:#4a4f55}
.v1 .ilus .dk{font-family:var(--b);font-size:14px;fill:#4a4f55}

/* ===========================================================
   GAYA LAPANGAN - lapisan bentuk untuk halaman bergaya kartu

   Dipakai oleh index.html dan tim.html. Tujuannya menyamakan
   rasa kartu di dua halaman itu dengan halaman lain: sudut
   dibuat siku, batas dipertebal, penanda memakai bidang warna
   penuh, dan garis lengkung di bawah judul bagian dicabut.
   =========================================================== */
.v1{
  --radius:0px;
  --brand-050:#eef1f5;
  --brand-100:#b9c9dc;
  --accent-050:#fbe9ea;
  --accent-100:#edbfc3;
  --accent-soft:#fbe9ea;
  --text:#13181d;
}
.v1 h1,.v1 h2,.v1 h3,.v1 h4{letter-spacing:.004em;
  font-weight:600;line-height:1.08}
.v1 h4{font-size:17px}

/* penanda bagian: bidang merah penuh, bukan pil bergaris */
.v1 .badge{border-radius:0;background:var(--accent);border:0;color:#fff;
  font-family:var(--d);font-size:12.5px;font-weight:500;letter-spacing:.012em;height:30px}

/* garis lengkung di bawah judul bagian dicabut, diganti batas tebal */
.v1 .head h2, .v1 .cta-inner h2{padding-bottom:0}
.v1 .head h2::after, .v1 .cta-inner h2::after{display:none}
.v1 .head{gap:14px}

/* hero beranda jadi blok biru penuh */
.v1 .hero{background:var(--brand);color:#fff;align-items:center}
.v1 .hero h1{color:#fff;font-size:clamp(34px,5.4vw,62px);line-height:1.04}
.v1 .hero p{color:#bdcbdc}
.v1 .hero .btn-line{color:#fff;border-color:rgba(255,255,255,.45);border-width:2px}
.v1 .hero .btn-line:hover{background:rgba(255,255,255,.1);border-color:#fff}
.v1 .hero .ill{border:0}

/* hero halaman dalam, dipakai halaman Tim */
.v1 .phero{background:var(--brand);border-bottom:0;color:#fff}
.v1 .phero h1{color:#fff;font-size:clamp(32px,4.8vw,52px);line-height:1.05}
.v1 .phero p.lede{color:#bdcbdc}
.v1 .phero .crumb{color:#8fa6c2}
.v1 .phero .crumb span{color:#fff}
.v1 .phero .badge{background:var(--accent)}
.v1 .phero .ill{border:0}
.v1 .phero .btn-line{color:#fff;border-color:rgba(255,255,255,.45);border-width:2px}
.v1 .phero .btn-line:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* kartu: siku, batas atas tebal sebagai penanda */
.v1 .card,.v1 .vcard,.v1 .scard{border-radius:0;border-width:1px;
  border-top:4px solid var(--brand)}
.v1 .vcard .num{font-family:var(--d);font-weight:600;font-size:18px;letter-spacing:.04em}
.v1 .pillar{border-radius:0;border-top:4px solid var(--accent)}
.v1 .pillar .tag span{font-family:var(--d);font-size:12.5px;font-weight:500;letter-spacing:.012em}
.v1 .pillar .tag i{border-radius:0;background:var(--accent);color:#fff}

/* kartu anggota tim dan kartu berita */
.v1 .team{border-radius:0;border-top:4px solid var(--brand)}
.v1 .team .role{font-family:var(--d);font-size:12.5px;font-weight:500;letter-spacing:.012em}
.v1 .bcard{border-radius:0;border-top:4px solid var(--accent)}
.v1 .bcard .bmeta{font-family:var(--d);font-size:12px;font-weight:400;letter-spacing:.012em;
  }
.v1 .gal .ill{border-radius:0}

/* pita ajakan di dasar beranda */
.v1 .cta{background:var(--brand)}
.v1 .cta-inner h2{color:#fff}

/* ---------- perbaikan kartu nilai utama ----------
   Tiga hal yang diperbaiki di sini.

   Satu, garis merah tegak di samping ikon. Itu bukan rancangan,
   melainkan aturan .row dari desain-2.css yang ikut terbawa ke
   dalam .v1. Penetral yang lama hanya mencabut batas bawah dan
   jarak, batas kirinya lolos.

   Dua, kotak ikon masih bersudut membulat, satu-satunya elemen
   yang begitu setelah arah Lapangan dipasang.

   Tiga, nomor urut berwarna merah sehingga bersaing dengan judul
   kartu, padahal nomornya hanya penanda urutan baca. */
.v1 .row,.v1 .vcard .row{border-left:0;padding-left:0}
.v1 .icon{border-radius:0;width:46px;height:46px}
.v1 .icon svg{width:22px;height:22px;stroke-width:1.6}
.v1 .vcard .num{color:var(--muted);font-weight:500;font-size:13px;letter-spacing:.012em}
.v1 .vcard h3{font-size:19px}

/* ===========================================================
   PAPAN LAYANAN

   Empat layanan tidak lagi berdiri sebagai empat kartu terpisah,
   melainkan satu papan dengan empat baris. Di layar lebar tiap
   baris terbagi tiga: ikon, nama layanan, lalu keterangan, mirip
   papan informasi. Di layar kecil ketiganya menumpuk.
   =========================================================== */
.v1 .papan{background:var(--surface);border:1px solid var(--line);
  border-top:3px solid var(--brand)}
.v1 .papan article{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(16px,2.4vw,28px);row-gap:8px;align-items:start;
  padding:clamp(20px,2.6vw,28px) clamp(18px,2.6vw,30px)}
.v1 .papan article + article{border-top:1px solid var(--line-soft)}
.v1 .papan .icon{grid-row:1/span 2;width:42px;height:42px}
.v1 .papan h3{grid-column:2;font-size:18px;line-height:1.3}
.v1 .papan p{grid-column:2;color:var(--muted);font-size:14.5px;max-width:74ch}
@media (min-width:900px){
  .v1 .papan article{grid-template-columns:auto minmax(0,19ch) minmax(0,1fr);
    align-items:center;row-gap:0}
  .v1 .papan .icon{grid-row:1}
  .v1 .papan h3{grid-column:2}
  .v1 .papan p{grid-column:3}
}

/* ===========================================================
   ALUR KERJA JADI GARIS WAKTU

   Tujuh tahap dibaca berurutan dari atas ke bawah, disambung
   satu garis tegak. Bentuk ini jauh lebih jelas menunjukkan
   urutan daripada tujuh kartu sejajar, dan tidak perlu berubah
   susunan sama sekali di layar kecil.
   =========================================================== */
.v1 .steps{display:grid;grid-template-columns:1fr;gap:0;
  max-width:860px;margin-inline:auto;text-align:left}
.v1 .step{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);
  column-gap:20px;row-gap:5px;background:none;border:0;border-radius:0;
  padding:0 0 clamp(22px,2.6vw,30px)}
.v1 .step:last-child{padding-bottom:0}
.v1 .step::before{content:"";position:absolute;left:17px;top:38px;bottom:0;
  width:2px;background:var(--line)}
.v1 .step:last-child::before{display:none}
.v1 .step .n{grid-column:1;grid-row:1/span 2;border-radius:0;
  width:36px;height:36px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:14px;
  font-variant-numeric:tabular-nums}
.v1 .step .sh{grid-column:2;grid-row:1;align-self:center;font-size:17px;font-weight:700}
.v1 .step p{grid-column:2;grid-row:2;font-size:14.5px;color:var(--muted);line-height:1.6}

/* ===========================================================
   NILAI UTAMA - DIBUAT BERSIH

   Lima kartu berbingkai dengan kotak ikon, nomor merah, dan
   batas atas tebal itu ramai di ruang yang sempit. Lima kolom
   sejajar juga memaksa tiap kalimat patah jadi empat baris.

   Bentuk barunya mengikuti prinsip yang sama dengan situs yang
   bersih: pemisahan dikerjakan ruang kosong dan satu garis
   tipis, bukan kotak; nomor urut jadi penanda utama karena isinya
   memang berurut; dan lebar kolom dijaga supaya kalimatnya tidak
   terpenggal.

   Ikon disembunyikan, bukan dihapus dari HTML, jadi gampang
   dimunculkan lagi kalau ternyata dibutuhkan.
   =========================================================== */
.v1 .g5:has(.vcard){grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:0 clamp(28px,4vw,64px)}
.v1 .vcard{background:none;border:0;border-top:1px solid var(--line);
  border-radius:0;padding:22px 0 26px;gap:0}
.v1 .vcard .row{display:block}
.v1 .vcard .icon{display:none}
.v1 .vcard .num{font-family:var(--font-d);font-size:30px;font-weight:700;
  line-height:1;color:var(--line);letter-spacing:-.02em;margin-bottom:14px}
.v1 .vcard h3{font-size:20px;letter-spacing:-.02em;margin-bottom:8px}
.v1 .vcard p{font-size:15.5px;line-height:1.7;color:var(--muted);max-width:40ch}

@media (min-width:1080px){
  .v1 .g5:has(.vcard){grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* kartu lain ikut dilonggarkan supaya satu bahasa dengan di atas */
.v1 .pillar p,.v1 .scard p,.v1 .card p{font-size:15.5px;line-height:1.7}
.v1 .head p{font-size:16.5px;line-height:1.7}
.v1 .papan p{font-size:15.5px}
.v1 .step p{font-size:15.5px}

/* galeri beranda ikut empat sejajar di layar lebar */
@media (min-width:1100px){
  .v1 .gal{grid-template-columns:repeat(4,minmax(0,1fr))}
}