/* Token dan komponen web PT Djasa Ubersakti Tbk
   Dihasilkan oleh css.py dari web.py dan warna.py. Jangan disunting langsung.
   Nilai warna milik Panduan Warna Dokumen; nilai web milik Panduan Web.
   Dasar: 11 jenis halaman bhp.com dirender 2026-08-07. */

:root {
  /* Tangga netral, milik Panduan Warna. R = G dan B = R - 10. */
  --ptdu-n0: #FFFFFF;  /* kertas dan latar utama */
  --ptdu-n1: #F7F7ED;  /* permukaan tenang: kartu, kotak simpulan, blok kutipan */
  --ptdu-n2: #EBEBE1;  /* permukaan kedua: baris tabel berselang */
  --ptdu-n3: #DCDCD2;  /* garis pemisah dan bingkai halus */
  --ptdu-n4: #B4B4AA;  /* garis di atas bidang gelap, keadaan mati */
  --ptdu-n5: #76766C;  /* teks sekunder, keterangan gambar, catatan kaki */
  --ptdu-n6: #505046;  /* teks sekunder di atas bidang terang dan bidang muda */
  --ptdu-n7: #000000;  /* teks utama, sama dengan warna logo */

  /* Bidang dan pasangan teksnya, milik Panduan Warna. Jangan ditukar. */
  --ptdu-bidang-terang: #F2B705;  /* Kuning Tera */
  --ptdu-bidang-terang-teks: #000000;
  --ptdu-bidang-gelap: #D04219;  /* Jingga Bata */
  --ptdu-bidang-gelap-teks: #FFFFFF;
  --ptdu-bidang-muda: #FDF0CC;  /* Kuning Muda */
  --ptdu-bidang-muda-teks: #000000;
  --ptdu-bidang-hitam: #000000;  /* Hitam */
  --ptdu-bidang-hitam-teks: #FFFFFF;

  /* Warna bagan, milik Panduan Warna, dipakai berurutan. */
  --ptdu-bagan-1: #D04219;
  --ptdu-bagan-2: #F2B705;
  --ptdu-bagan-3: #1F6F5C;
  --ptdu-bagan-4: #6B4E9B;
  --ptdu-bagan-5: #76766C;

  /* Huruf: Inter 4.001 (v4.1, 16 November 2024),
     SIL Open Font License 1.1. Milik Panduan Web, bukan panduan lain. */
  --ptdu-huruf: 'InterVariable', 'Inter', system-ui, Arial, sans-serif;

  /* Ukuran, jarak baris, dan jarak aksara tiap peran. Jarak aksara
     dihitung dengan rumus resmi Inter, bukan dikira kira. */
  --ptdu-web-hero: 52px;  /* judul utama beranda */
  --ptdu-web-hero-baris: 60px;
  --ptdu-web-hero-jarak: -0.0160em;
  --ptdu-web-h1: 44px;  /* judul halaman pada pita judul */
  --ptdu-web-h1-baris: 52px;
  --ptdu-web-h1-jarak: -0.0159em;
  --ptdu-web-h2: 32px;  /* judul seksi */
  --ptdu-web-h2-baris: 40px;
  --ptdu-web-h2-jarak: -0.0153em;
  --ptdu-web-h3: 24px;  /* judul kartu dan anak seksi */
  --ptdu-web-h3-baris: 32px;
  --ptdu-web-h3-jarak: -0.0132em;
  --ptdu-web-h4: 20px;  /* judul kecil, kepala akordeon */
  --ptdu-web-h4-baris: 28px;
  --ptdu-web-h4-jarak: -0.0103em;
  --ptdu-web-lede: 21px;  /* paragraf pengantar di bawah judul halaman */
  --ptdu-web-lede-baris: 32px;
  --ptdu-web-lede-jarak: -0.0112em;
  --ptdu-web-badan: 16px;  /* seluruh paragraf isi */
  --ptdu-web-badan-baris: 26px;
  --ptdu-web-badan-jarak: -0.0042em;
  --ptdu-web-kecil: 14px;  /* keterangan, tanggal, remah roti, keterangan foto */
  --ptdu-web-kecil-baris: 20px;
  --ptdu-web-kecil-jarak: 0.0009em;
  --ptdu-web-nav: 16px;  /* tautan navigasi dan tautan biasa berlabel */
  --ptdu-web-nav-baris: 24px;
  --ptdu-web-nav-jarak: -0.0042em;
  --ptdu-web-tombol: 16px;  /* tombol dan tautan panah */
  --ptdu-web-tombol-baris: 24px;
  --ptdu-web-tombol-jarak: -0.0042em;
  --ptdu-web-kaki: 20px;  /* tautan utama kaki halaman */
  --ptdu-web-kaki-baris: 28px;
  --ptdu-web-kaki-jarak: -0.0103em;
  --ptdu-web-angka-besar: 44px;  /* harga saham dan angka kunci */
  --ptdu-web-angka-besar-baris: 48px;
  --ptdu-web-angka-besar-jarak: -0.0159em;

  /* Kisi web, milik Panduan Web. */
  --ptdu-web-kontainer: 1200px;  /* lebar isi maksimum; benchmark memakai 1444, PTDU memilih lebih sempit supaya baris teks tidak terlalu panjang */
  --ptdu-web-selokan: 24px;  /* jarak antarkolom kartu */
  --ptdu-web-tepi-seluler: 24px;  /* tepi kiri kanan di bawah 768 px */
  --ptdu-web-seksi-desktop: 96px;  /* jarak tegak antarseksi pada desktop */
  --ptdu-web-seksi-seluler: 64px;  /* jarak tegak antarseksi di bawah 768 px */
  --ptdu-web-jeda-bidang: 32px;  /* jarak minimum antara dua bidang berwarna; padanan 8,00 mm dokumen adalah 30,2 px pada 96 ppi, dibulatkan naik ke kelipatan 8 */
  --ptdu-web-sisip-bidang: 32px;  /* jarak teks ke tepi bidang, logika yang sama */
  --ptdu-web-radius: 0px;  /* sudut siku di seluruh komponen, mengikuti bidang dokumen */
  --ptdu-web-langkah: 8px;  /* seluruh jarak kelipatan 8 px */
  --ptdu-web-kolom-artikel: 640px;  /* kira kira 83 aksara, di bawah batas 90 */

  /* Komponen. */
  --ptdu-web-tombol-tinggi: 48px;  /* tinggi tombol utama dan sekunder */
  --ptdu-web-input-tinggi: 48px;  /* tinggi ruas isian satu baris */
  --ptdu-web-chip-tinggi: 32px;  /* tinggi chip filter dan penanda */
  --ptdu-web-kartu-sisip: 32px;  /* jarak isi ke tepi kartu */
  --ptdu-web-target-sentuh: 44px;  /* sisi terpendek minimum unsur yang bisa diketuk */
  --ptdu-web-transisi: 150ms;  /* lama peralihan keadaan hover dan fokus */
  --ptdu-web-fokus-tebal: 2px;  /* tebal garis fokus keyboard */
  --ptdu-web-garis-aksen: 6px;  /* tebal garis tegak aksen dan garis atas kotak sorot */
  --ptdu-web-pita-judul-tinggi: 160px;  /* tinggi minimum pita judul halaman pada desktop */

  --ptdu-web-logo-header: 111px;  /* tinggi 30 px, di atas batas 88 px pedoman logo */
  --ptdu-web-logo-kaki: 133px;  /* tinggi 36 px */
}

/* ---------------------------------------------------------------- dasar */

* { box-sizing: border-box; }

html { text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  font-family: var(--ptdu-huruf);
  font-size: var(--ptdu-web-badan);
  line-height: var(--ptdu-web-badan-baris);
  letter-spacing: var(--ptdu-web-badan-jarak);
  color: var(--ptdu-n7);
  background: var(--ptdu-n0);
  /* Sumbu ukuran optis Inter mengikuti ukuran huruf dengan sendirinya. */
  font-optical-sizing: auto;
  font-synthesis: none;
}

h1, h2, h3, h4, nav, button, .ptdu-sans { font-family: var(--ptdu-huruf); }

h1 { font-size: var(--ptdu-web-h1); line-height: var(--ptdu-web-h1-baris); letter-spacing: var(--ptdu-web-h1-jarak); font-weight: 700; margin: 0; }
h2 { font-size: var(--ptdu-web-h2); line-height: var(--ptdu-web-h2-baris); letter-spacing: var(--ptdu-web-h2-jarak); font-weight: 700; margin: 0 0 24px; }
h3 { font-size: var(--ptdu-web-h3); line-height: var(--ptdu-web-h3-baris); letter-spacing: var(--ptdu-web-h3-jarak); font-weight: 700; margin: 0 0 8px; }
h4 { font-size: var(--ptdu-web-h4); line-height: var(--ptdu-web-h4-baris); letter-spacing: var(--ptdu-web-h4-jarak); font-weight: 700; margin: 0 0 8px; }

/* Angka: sejajar dan bernol bergaris pada tabel, panel saham, dan kalender.
   Huruf besar seluruhnya memakai bentuk peka huruf besar. */
.ptdu-angka, .ptdu-tabel .angka, .ptdu-saham .harga, .ptdu-agenda .tanggal {
  font-feature-settings: "tnum" 1, "zero" 1;
  font-variant-numeric: tabular-nums slashed-zero;
}
.ptdu-kapital, .ptdu-agenda .tanggal .bulan, .ptdu-chip {
  font-feature-settings: "case" 1, "cpsp" 1;
}

p { margin: 0 0 16px; }

/* Tautan di dalam teks: hitam bergaris bawah, tidak berwarna. */
a { color: var(--ptdu-n7); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: var(--ptdu-web-fokus-tebal) solid var(--ptdu-n7); outline-offset: 2px; }
.ptdu-gelap :focus-visible, .ptdu-kaki :focus-visible { outline-color: var(--ptdu-n0); }

::selection { background: var(--ptdu-bidang-terang); color: var(--ptdu-n7); }

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

.ptdu-kontainer {
  max-width: var(--ptdu-web-kontainer);
  margin: 0 auto;
  padding: 0 var(--ptdu-web-tepi-seluler);
}

.ptdu-seksi { padding: var(--ptdu-web-seksi-desktop) 0; }
.ptdu-seksi-selang { background: var(--ptdu-n1); }

.ptdu-lede {
  font-size: var(--ptdu-web-lede); line-height: var(--ptdu-web-lede-baris);
  letter-spacing: var(--ptdu-web-lede-jarak);
  color: var(--ptdu-n5); max-width: 720px;
}
.ptdu-kecil { font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-kecil); line-height: var(--ptdu-web-kecil-baris); letter-spacing: var(--ptdu-web-kecil-jarak); }
.ptdu-sekunder { color: var(--ptdu-n5); }
.ptdu-teks-aksen { color: var(--ptdu-bidang-gelap); }

.ptdu-lompat { position: absolute; left: -9999px; top: 0; background: var(--ptdu-n0); padding: 8px 16px; }
.ptdu-lompat:focus { left: 0; z-index: 99; }

/* ---------------------------------------------------------------- kepala */

.ptdu-kepala {
  position: sticky; top: 0; z-index: 50;
  background: var(--ptdu-n0);
  border-bottom: 1px solid var(--ptdu-n3);
}
.ptdu-kepala-isi {
  display: flex; align-items: center; gap: 32px;
  height: 72px;
}
.ptdu-kepala .ptdu-logo img { width: var(--ptdu-web-logo-header); display: block; }
.ptdu-nav { display: flex; gap: 24px; margin-left: auto; }
.ptdu-nav a {
  font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-nav);
  line-height: var(--ptdu-web-nav-baris); letter-spacing: var(--ptdu-web-nav-jarak);
  text-decoration: none;
  padding: 8px 0; border-bottom: 2px solid transparent;
}
.ptdu-nav a:hover, .ptdu-nav a[aria-current] { border-bottom-color: var(--ptdu-n7); }

/* Menu lengkap: panel bidang hitam menutup layar, teks putih. */
.ptdu-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--ptdu-bidang-hitam); color: var(--ptdu-bidang-hitam-teks);
  padding: 96px 0;
}
.ptdu-menu a {
  color: var(--ptdu-bidang-hitam-teks); text-decoration: none;
  font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-h3);
  line-height: 48px; font-weight: 700; display: inline-block;
}
.ptdu-menu a:hover { text-decoration: underline; text-underline-offset: 6px; }

/* Remah roti. */
.ptdu-remah {
  background: var(--ptdu-n1); border-bottom: 1px solid var(--ptdu-n3);
  font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-kecil);
  padding: 12px 0; color: var(--ptdu-n5);
}
.ptdu-remah a { color: var(--ptdu-n5); }
.ptdu-remah [aria-current] { color: var(--ptdu-n7); font-weight: 700; }

/* ---------------------------------------------------------------- pita judul */

.ptdu-pita-judul {
  background: var(--ptdu-bidang-terang); color: var(--ptdu-bidang-terang-teks);
  padding: var(--ptdu-web-sisip-bidang) 0;
  min-height: var(--ptdu-web-pita-judul-tinggi);
  display: flex; align-items: center;
}
.ptdu-pita-judul .ptdu-kontainer { width: 100%; }
.ptdu-pita-judul .ptdu-lede { color: var(--ptdu-n6); }

/* ---------------------------------------------------------------- tombol */

.ptdu-tombol, .ptdu-tombol-sekunder, .ptdu-tombol-di-gelap {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--ptdu-web-tombol-tinggi); padding: 0 24px; gap: 8px;
  font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-tombol); font-weight: 700;
  letter-spacing: var(--ptdu-web-tombol-jarak);
  text-decoration: none; border: none; cursor: pointer;
  transition: background var(--ptdu-web-transisi), color var(--ptdu-web-transisi), border-color var(--ptdu-web-transisi);
}
.ptdu-tombol { background: var(--ptdu-bidang-gelap); color: var(--ptdu-bidang-gelap-teks); }
.ptdu-tombol:hover { background: var(--ptdu-bidang-hitam); color: var(--ptdu-bidang-hitam-teks); }
.ptdu-tombol-sekunder { background: transparent; color: var(--ptdu-n7); border: 2px solid var(--ptdu-n7); }
.ptdu-tombol-sekunder:hover { background: var(--ptdu-n7); color: var(--ptdu-n0); }
.ptdu-tombol-di-gelap { background: transparent; color: var(--ptdu-n0); border: 2px solid var(--ptdu-n0); }
.ptdu-tombol-di-gelap:hover { background: var(--ptdu-n0); color: var(--ptdu-n7); }

.ptdu-tautan-panah {
  font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-tombol); font-weight: 700;
  text-decoration: none; border-bottom: 2px solid var(--ptdu-n7); padding-bottom: 4px;
}
.ptdu-tautan-panah::after { content: " \2192"; }

/* ---------------------------------------------------------------- chip */

.ptdu-chip {
  display: inline-flex; align-items: center; height: var(--ptdu-web-chip-tinggi);
  padding: 0 12px; gap: 8px;
  background: var(--ptdu-bidang-terang); color: var(--ptdu-bidang-terang-teks);
  font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-kecil); font-weight: 700;
  text-decoration: none;
}
.ptdu-chip-garis {
  display: inline-flex; align-items: center; height: var(--ptdu-web-chip-tinggi);
  padding: 0 12px; background: transparent; color: var(--ptdu-n6);
  border: 1px solid var(--ptdu-n3);
  font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-kecil);
}

/* ---------------------------------------------------------------- kartu */

.ptdu-kartu {
  background: var(--ptdu-n1); padding: var(--ptdu-web-kartu-sisip);
  display: flex; flex-direction: column; gap: 8px;
}
.ptdu-seksi-selang .ptdu-kartu:not(.ptdu-kartu-gelap):not(.ptdu-kartu-muda):not(.ptdu-kartu-hitam) {
  background: var(--ptdu-n0); border: 1px solid var(--ptdu-n3);
}
.ptdu-kartu-gelap { background: var(--ptdu-bidang-gelap); color: var(--ptdu-bidang-gelap-teks); }
.ptdu-kartu-gelap a, .ptdu-kartu-gelap .ptdu-tautan-panah { color: var(--ptdu-bidang-gelap-teks); border-color: var(--ptdu-bidang-gelap-teks); }
.ptdu-kartu-muda { background: var(--ptdu-bidang-muda); color: var(--ptdu-bidang-muda-teks); }
.ptdu-kartu-muda .ptdu-sekunder { color: var(--ptdu-n6); }
.ptdu-kartu-hitam { background: var(--ptdu-bidang-hitam); color: var(--ptdu-bidang-hitam-teks); }

/* Kartu berita: foto di atas, isi putih di bawah; teks tidak pernah di atas foto. */
.ptdu-kartu-berita { background: var(--ptdu-n0); border: 1px solid var(--ptdu-n3); display: flex; flex-direction: column; }
.ptdu-kartu-berita .isi { padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.ptdu-kartu-berita:hover { border-color: var(--ptdu-n7); }

/* Kotak sorot bergaris dan garis tegak aksen, perangkat lentur Panduan Warna. */
.ptdu-kotak-sorot { border: 1px solid var(--ptdu-n3); border-top: var(--ptdu-web-garis-aksen) solid var(--ptdu-bidang-gelap); padding: var(--ptdu-web-kartu-sisip); background: var(--ptdu-n0); }
.ptdu-garis-aksen { border-left: var(--ptdu-web-garis-aksen) solid var(--ptdu-bidang-gelap); padding-left: 24px; }

/* Kutipan bertanda kutip terang. */
.ptdu-kutipan { margin: 0; }
.ptdu-kutipan::before {
  content: "\201C"; display: block; color: var(--ptdu-bidang-terang);
  font-family: var(--ptdu-huruf); font-size: 96px; line-height: 48px; height: 56px;
  /* Tanpa ini tanda kutip Inter terbaca seperti tanda prima pada ukuran besar. */
  font-feature-settings: "ss03" 1;
}
.ptdu-kutipan p { font-size: var(--ptdu-web-lede); line-height: var(--ptdu-web-lede-baris); }

/* Label bagian bernomor. */
.ptdu-label-bagian { display: flex; gap: 16px; align-items: baseline; }
.ptdu-label-bagian .angka { font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-h2); font-weight: 700; color: var(--ptdu-bidang-gelap); }

/* Panel di atas foto: hanya panel hitam pejal atau putih pejal. */
.ptdu-panel-foto { position: relative; }
.ptdu-panel-foto .panel {
  position: absolute; left: 0; bottom: 0; max-width: 60%;
  background: var(--ptdu-bidang-hitam); color: var(--ptdu-bidang-hitam-teks);
  padding: 24px 32px;
}

/* ---------------------------------------------------------------- tabel */

.ptdu-tabel { width: 100%; border-collapse: collapse; font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-nav); }
.ptdu-tabel th, .ptdu-tabel td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--ptdu-n3); }
.ptdu-tabel .angka { text-align: right; font-variant-numeric: tabular-nums; }
.ptdu-tabel thead th { background: var(--ptdu-bidang-hitam); color: var(--ptdu-bidang-hitam-teks); }
.ptdu-tabel tbody tr:nth-child(even) { background: var(--ptdu-n2); }
.ptdu-tabel-resmi thead th { background: transparent; color: var(--ptdu-n7); border-bottom: 2px solid var(--ptdu-n7); }
.ptdu-tabel-resmi tbody tr:nth-child(even) { background: transparent; }

/* ---------------------------------------------------------------- formulir */

/* Baris isian dengan tombol di sampingnya. Wajib memakai kelas ini, bukan
   flex dadakan: isian HTML punya lebar terkecil bawaan dan tidak mau menyusut
   tanpa min-width nol, sehingga pada layar sempit tombolnya terdorong keluar
   halaman. Cacat itu tertangkap ukur piksel, bukan oleh mata. */
.ptdu-baris-isian { display: flex; gap: 16px; align-items: end; flex-wrap: wrap; }
.ptdu-baris-isian > .ruas { flex: 1 1 220px; min-width: 0; }
.ptdu-baris-isian > .ptdu-tombol { flex: 0 0 auto; }

.ptdu-label { display: block; font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-nav); font-weight: 700; margin-bottom: 8px; }
.ptdu-wajib { color: var(--ptdu-bidang-gelap); }
.ptdu-input, .ptdu-pilih {
  width: 100%; height: var(--ptdu-web-input-tinggi);
  font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-nav); color: var(--ptdu-n7);
  background: var(--ptdu-n0); border: none; border-bottom: 2px solid var(--ptdu-n4);
  padding: 0 2px; transition: border-color var(--ptdu-web-transisi);
}
.ptdu-area { width: 100%; min-height: 120px; font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-nav); padding: 12px; border: 1px solid var(--ptdu-n4); background: var(--ptdu-n0); }
.ptdu-input:focus, .ptdu-pilih:focus, .ptdu-area:focus { outline: none; border-color: var(--ptdu-n7); }
.ptdu-galat { font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-kecil); color: var(--ptdu-bidang-gelap); font-weight: 700; }
.ptdu-input[aria-invalid="true"] { border-color: var(--ptdu-bidang-gelap); }
.ptdu-keterangan-ruas { font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-kecil); color: var(--ptdu-n5); margin-top: 4px; }

/* ---------------------------------------------------------------- agenda dan saham */

.ptdu-agenda { background: var(--ptdu-n0); border: 1px solid var(--ptdu-n3); border-left: var(--ptdu-web-garis-aksen) solid var(--ptdu-bidang-gelap); padding: 24px; display: flex; gap: 24px; align-items: center; }
.ptdu-agenda .tanggal { font-family: var(--ptdu-huruf); text-align: center; min-width: 72px; }
.ptdu-agenda .tanggal .hari { font-size: var(--ptdu-web-h1); line-height: 1; letter-spacing: var(--ptdu-web-h1-jarak); font-weight: 700; display: block; }
.ptdu-agenda .tanggal .bulan { font-size: var(--ptdu-web-kecil); font-weight: 700; letter-spacing: 1px; }

.ptdu-saham { background: var(--ptdu-bidang-hitam); color: var(--ptdu-bidang-hitam-teks); }
.ptdu-saham .tab { display: flex; }
.ptdu-saham .tab a {
  font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-kecil); font-weight: 700;
  color: var(--ptdu-bidang-hitam-teks); text-decoration: none; padding: 12px 20px;
}
.ptdu-saham .tab a[aria-current] { background: var(--ptdu-bidang-terang); color: var(--ptdu-bidang-terang-teks); }
.ptdu-saham .isi { padding: 32px; }
.ptdu-saham .harga { font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-angka-besar); line-height: var(--ptdu-web-angka-besar-baris); letter-spacing: var(--ptdu-web-angka-besar-jarak); font-weight: 700; }
.ptdu-saham .keterangan { font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-kecil); color: var(--ptdu-n4); }

/* ---------------------------------------------------------------- akordeon dan penomoran */

.ptdu-akordeon { border-top: 1px solid var(--ptdu-n3); }
.ptdu-akordeon summary {
  font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-h4); font-weight: 700;
  padding: 20px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  border-bottom: 1px solid var(--ptdu-n3);
}
.ptdu-akordeon summary::after { content: "\2304"; font-family: var(--ptdu-huruf); }
.ptdu-akordeon[open] summary::after { content: "\2303"; }
.ptdu-akordeon .isi { padding: 16px 0 24px; border-bottom: 1px solid var(--ptdu-n3); }

.ptdu-halaman { display: flex; gap: 8px; align-items: center; font-family: var(--ptdu-huruf); }
.ptdu-halaman a { min-width: var(--ptdu-web-target-sentuh); height: var(--ptdu-web-target-sentuh); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: 1px solid var(--ptdu-n3); }
.ptdu-halaman a[aria-current] { background: var(--ptdu-bidang-terang); border-color: var(--ptdu-bidang-terang); font-weight: 700; }
.ptdu-halaman a:hover { border-color: var(--ptdu-n7); }

/* ---------------------------------------------------------------- kaki halaman */

.ptdu-kaki { background: var(--ptdu-bidang-hitam); color: var(--ptdu-bidang-hitam-teks); padding: 64px 0 32px; }
.ptdu-kaki .ptdu-logo img { width: var(--ptdu-web-logo-kaki); display: block; }
.ptdu-kaki a { color: var(--ptdu-bidang-hitam-teks); }
.ptdu-kaki .tautan-utama a { font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-kaki); line-height: 40px; letter-spacing: var(--ptdu-web-kaki-jarak); font-weight: 700; text-decoration: none; display: inline-block; }
.ptdu-kaki .tautan-utama a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ptdu-kaki .garis { border: none; border-top: 1px solid var(--ptdu-n5); margin: 40px 0 24px; }
.ptdu-kaki .hukum { font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-kecil); color: var(--ptdu-n4); display: flex; flex-wrap: wrap; gap: 24px; }
.ptdu-kaki .hukum a { color: var(--ptdu-n4); }

.ptdu-ke-atas {
  position: fixed; left: 24px; bottom: 24px; width: 48px; height: 48px;
  background: var(--ptdu-n0); border: 1px solid var(--ptdu-n3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; text-decoration: none;
}
.ptdu-ke-atas:hover { border-color: var(--ptdu-n7); }

/* ---------------------------------------------------------------- tema gelap tematik */

.ptdu-gelap { background: var(--ptdu-bidang-hitam); color: var(--ptdu-bidang-hitam-teks); }
.ptdu-gelap .ptdu-sekunder { color: var(--ptdu-n4); }
.ptdu-gelap a { color: var(--ptdu-bidang-hitam-teks); }
.ptdu-gelap .ptdu-teks-aksen { color: var(--ptdu-bidang-terang); }

/* Hero beranda: pita putih tipografis di atas foto selebar layar. */
.ptdu-hero-judul {
  font-family: var(--ptdu-huruf); font-size: var(--ptdu-web-hero);
  line-height: var(--ptdu-web-hero-baris); letter-spacing: var(--ptdu-web-hero-jarak);
  font-weight: 700; margin: 0 0 16px;
}
.ptdu-foto { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------- responsif */

@media (max-width: 991.98px) {
  .ptdu-nav { display: none; }
}
@media (max-width: 767.98px) {
  .ptdu-seksi { padding: var(--ptdu-web-seksi-seluler) 0; }
  .ptdu-kepala-isi { height: 60px; }
  h1 { font-size: 32px; line-height: 38px; }
  h2 { font-size: 26px; line-height: 32px; }
  .ptdu-hero-judul { font-size: 36px; line-height: 42px; }
  .ptdu-saham .harga { font-size: 36px; line-height: 40px; }
  .ptdu-panel-foto .panel { position: static; max-width: none; }
  /* Kaki halaman: dua kolom tautan menjadi satu, kalau tidak nama seksi
     yang panjang patah di tengah dan terbaca seperti dua tautan. */
  .ptdu-kaki .tautan-utama { flex-direction: column; gap: 0 !important; }
}