/* ═══════════════════════════════════════════════════════════════════════
   GAYA.CSS — seluruh tampilan situs mapala STMIK WiCiDa

   ISI BERKAS INI
     1. Token          warna, ukuran, font        <- paling sering diubah
     2. Dasar          aturan seluruh halaman
     3. Kepala         bar atas
     4. Situs publik   halaman untuk orang luar
     5. Ruang pengurus tab dan panel kerja
     6. Tabel          termasuk trik tampilan HP
     7. Kendali        tombol dan kolom isian
     8. Dialog         konfirmasi hapus
     9. KTA            kartu tanda anggota

   TITIK PATAH LAYAR yang dipakai di berkas ini:
     520px   kolom formulir jadi dua
     640px   sakelar naik ke kanan, jarak melebar
     768px   tabel kembali jadi tabel biasa
     900px   baris keadaan jadi lima kolom
     940px   panel kerja jadi dua kolom
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   1. TOKEN — SATU-SATUNYA TEMPAT WARNA & UKURAN DITULIS

   Ini bagian yang paling sering kamu ubah. Semua bagian lain di
   berkas ini memakai nama dari sini, jadi ganti satu nilai di sini
   dan seluruh halaman ikut berubah.

   Contoh: mau warna organisasi jadi hijau, bukan ungu?
   Ganti --ungu di blok :root, lalu ganti juga --ungu di dua blok
   tema gelap di bawahnya. Tiga tempat, selesai.

   JANGAN menulis warna langsung seperti color:#712B94 di bagian
   bawah. Selalu pakai var(--ungu). Kalau tidak, tema gelap rusak.
   ═══════════════════════════════════════════════════════════════ */

/* Font Benguiat Bk BT (dua berkas .woff2 di folder fonts/, dari berkas
   yang diunggah pengurus — BUKAN font gratis seperti Space Mono
   sebelumnya, jadi kalau situs ini benar-benar dipasang publik di
   mswicida.web.id, pastikan dulu lisensinya mengizinkan dipakai sebagai
   webfont, bukan cuma dipasang di komputer sendiri. Dipakai untuk
   SELURUH teks situs lewat token --teks di bawah. Cuma ada dua bobot
   (Book dan Bold), jadi font-style:italic di CSS lain otomatis jadi
   miring buatan peramban (font-synthesis), bukan berkas terpisah. */
@font-face{font-family:"Benguiat Bk BT";font-style:normal;font-weight:400;
  font-display:swap;src:url("../fonts/Benguiat-Book.woff2") format("woff2")}
@font-face{font-family:"Benguiat Bk BT";font-style:normal;font-weight:700;
  font-display:swap;src:url("../fonts/Benguiat-Bold.woff2") format("woff2")}

:root{
  --kanvas:#FAF8FB; --alas:#FFFFFF; --alas-2:#F4F1F7;
  --tinta:#191320; --tinta-2:#5C5468;
  --ungu:#6B2589; --ungu-terang:#712B94; --ungu-tipis:#F2E9F7;
  --garis:#E3DEE9; --garis-2:#CFC7D8;
  --lumut:#2F6B3C; --lumut-tipis:#E7F1E9;
  --tanah:#83540F; --tanah-tipis:#F6EEDF;
  --bara:#963028; --bara-tipis:#F8E8E6;
  --pada-ungu:#FFFFFF;

  /* skala z-index tetap */
  --z-lokal:1; --z-lekat:30; --z-kepala:40; --z-dialog:50;

  --r:0.75rem; --r-kecil:0.375rem;
  --sisi:1rem;
  --teks:"Benguiat Bk BT",Georgia,"Times New Roman",serif;

  /* lambang organisasi. Ganti berkasnya di gambar/logo.webp,
     atau tunjuk ke nama berkas lain di sini. */
  --logo:url("data:image/webp;base64,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");
  color-scheme:light;
}
@media (min-width:640px){:root{--sisi:1.375rem}}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --kanvas:#141019; --alas:#1C1624; --alas-2:#241D2E;
    --tinta:#F0EBF4; --tinta-2:#ADA3B8;
    --ungu:#C79AE2; --ungu-terang:#D3AEEA; --ungu-tipis:#2B1F36;
    --garis:#302838; --garis-2:#453A50;
    --lumut:#87C795; --lumut-tipis:#1B2C1F;
    --tanah:#DFB064; --tanah-tipis:#2F2616;
    --bara:#EC8B82; --bara-tipis:#331D1B;
    --pada-ungu:#17101E;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --kanvas:#141019; --alas:#1C1624; --alas-2:#241D2E;
  --tinta:#F0EBF4; --tinta-2:#ADA3B8;
  --ungu:#C79AE2; --ungu-terang:#D3AEEA; --ungu-tipis:#2B1F36;
  --garis:#302838; --garis-2:#453A50;
  --lumut:#87C795; --lumut-tipis:#1B2C1F;
  --tanah:#DFB064; --tanah-tipis:#2F2616;
  --bara:#EC8B82; --bara-tipis:#331D1B;
  --pada-ungu:#17101E;
  color-scheme:dark;
}

/* ═══════════════════════════════════════════════════════════════
   2. DASAR — aturan yang berlaku untuk seluruh halaman
   Ukuran huruf badan teks, jarak baris, warna sorotan teks,
   bentuk scrollbar, dan cincin fokus untuk pengguna papan ketik.
   ═══════════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kanvas);color:var(--tinta);font-family:var(--teks);
  font-size:1rem;line-height:1.6;text-wrap:pretty;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:700;text-wrap:balance;line-height:1.2}
p{margin:0}
svg{display:block;flex:none}
img{max-width:100%}

::selection{background:var(--ungu-tipis);color:var(--tinta)}
input,textarea,select{caret-color:var(--ungu)}
*{scrollbar-width:thin;scrollbar-color:var(--garis-2) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--garis-2);border-radius:999px;
  border:3px solid var(--kanvas);background-clip:padding-box}
a{color:var(--ungu);text-underline-offset:.18em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--ungu);outline-offset:2px;border-radius:.25rem}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}

/* ═══════════════════════════════════════════════════════════════
   3. KEPALA HALAMAN — bar atas yang selalu menempel

   env(safe-area-inset-top) menjaga isi tidak tertutup poni iPhone.
   Di bawah 640px sakelar Situs publik / Ruang pengurus turun ke
   baris sendiri (order:3 + width:100%), di atas itu naik ke kanan.
   ═══════════════════════════════════════════════════════════════ */
.kepala{position:sticky;top:0;z-index:var(--z-kepala);background:var(--alas);
  padding:.625rem var(--sisi);
  padding-top:max(.625rem,env(safe-area-inset-top));
  padding-left:max(var(--sisi),env(safe-area-inset-left));
  padding-right:max(var(--sisi),env(safe-area-inset-right));
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.merek{display:flex;align-items:center;gap:.625rem;min-width:0;flex:1 1 auto}
.merek img{height:2.1rem;width:auto;border-radius:.1875rem}
.merek b{display:block;font-size:.7375rem;line-height:1.15}
.merek span{display:block;font-size:.6125rem;color:var(--tinta-2);line-height:1.2}
.saklar{display:flex;gap:.125rem;background:var(--alas-2);border-radius:999px;padding:.1875rem;
  order:3;width:100%}
.saklar button{flex:1;border:0;background:none;padding:.5rem .125rem;border-radius:999px;
  font:inherit;font-size:.675rem;font-weight:500;cursor:pointer;color:var(--tinta-2);
  min-height:1.5rem;transition:color 150ms ease-out}
.saklar button[aria-pressed="true"]{background:var(--ungu);color:var(--pada-ungu)}
.ikon-tbl{border:1px solid var(--garis);background:var(--alas);width:2.5rem;height:2.5rem;
  border-radius:999px;cursor:pointer;display:grid;place-items:center;color:var(--tinta-2);
  transition:color 150ms ease-out,border-color 150ms ease-out;flex:none}
.ikon-tbl:hover{color:var(--ungu);border-color:var(--garis-2)}
@media (min-width:640px){
  .merek img{height:2.15rem}
  .merek b{font-size:1rem}
  .saklar{order:0;width:auto;margin-left:auto}
  .saklar button{flex:none;padding:.5rem 1rem}
}

.wadah{max-width:92rem;margin:0 auto;
  padding-left:max(var(--sisi),env(safe-area-inset-left));
  padding-right:max(var(--sisi),env(safe-area-inset-right))}
.ukur{max-width:68ch}

/* ═══════════════════════════════════════════════════════════════
   4. SITUS PUBLIK — halaman yang dilihat orang luar
   Sampul, daftar divisi, tabel pengurus, kegiatan, berita, form.
   ═══════════════════════════════════════════════════════════════ */
.bagian{padding:2.25rem 0 2rem;border-top:1px solid var(--garis)}
.sampul+.bagian{border-top:none}
.bagian>.wadah>h2{font-size:1.375rem;margin-bottom:.375rem}
.bagian>.wadah>h2+p{color:var(--tinta-2);max-width:62ch;margin-bottom:1.25rem;font-size:.9375rem}
@media (min-width:640px){
  .bagian{padding:3.25rem 0 2.75rem}
  .bagian>.wadah>h2{font-size:1.625rem}
  .bagian>.wadah>h2+p{font-size:1rem;margin-bottom:1.625rem}
}

.sampul{position:relative;display:grid;align-content:end;gap:1.25rem;
  min-height:24rem;padding:2rem 0;margin:0;
  overflow:hidden;isolation:isolate;
  background:url('../gambar/cover.JPG') center/cover no-repeat}
.sampul>.wadah{margin-left:0}

.sampul h1,.sampul .lead,.sampul address{text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 14px rgba(0,0,0,.65)}
.sampul h1{color:#fff;font-size:clamp(1.75rem,7.5vw,3.125rem)}
.sampul h1 span{display:block;color:#D9BFEF}
.sampul .lead{margin-top:.875rem;font-size:1.0625rem;color:rgba(255,255,255,.85);max-width:54ch}
.sampul address{margin-top:1rem;font-style:Helvetica;font-size:.875rem;color:rgba(255,255,255,.75);line-height:1.7}
@media (min-width:768px){
  .sampul{min-height:32rem;padding:3.5rem 0}
  .sampul .lead{font-size:1.125rem}
}

.rincian{display:grid;gap:0}
.rincian>div{padding:.875rem 0;border-top:1px solid var(--garis)}
.rincian dt{font-weight:700;font-size:.9375rem}
.rincian dd{margin:.125rem 0 0;color:var(--tinta-2);font-size:.9375rem}
@media (min-width:640px){
  .rincian{grid-template-columns:repeat(auto-fit,minmax(21rem,1fr));column-gap:2.25rem}
  .rincian>div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:1rem;align-items:baseline}
  .rincian dd{margin:0}
}

.catatan-log{border-top:1px solid var(--garis)}
.catatan-log article{padding:1.125rem 0;border-bottom:1px solid var(--garis)}
.catatan-log h3{font-size:1.0625rem;margin-bottom:.25rem}
.catatan-log p{color:var(--tinta-2);max-width:62ch;font-size:.9375rem}
.catatan-log .tempat{display:flex;align-items:center;flex-wrap:wrap;gap:.375rem;margin-top:.5rem;
  font-size:.8125rem;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.entri-log{display:flex;gap:1rem;align-items:flex-start}
.gambar-log{width:5rem;height:5rem;border-radius:.625rem;object-fit:cover;flex:none;
  background:var(--alas-2)}
.gambar-log.kosong{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.25rem;border:1px dashed var(--garis-2);color:var(--tinta-2);font-size:.5625rem;
  line-height:1.2;text-align:center;padding:.25rem}
@media (min-width:640px){
  .gambar-log{width:6.5rem;height:6.5rem}
}

/* ═══════════════════════════════════════════════════════════════
   5. RUANG PENGURUS — tab modul, baris keadaan, dan panel kerja
   .kerja jadi dua kolom mulai 940px: tabel di kiri, formulir kanan.
   Di bawah itu menumpuk jadi satu kolom.
   ═══════════════════════════════════════════════════════════════ */
.tab{display:flex;gap:.25rem;overflow-x:auto;border-bottom:1px solid var(--garis);
  background:var(--alas);position:sticky;z-index:var(--z-lekat);
  padding-left:max(var(--sisi),env(safe-area-inset-left));
  padding-right:max(var(--sisi),env(safe-area-inset-right));
  scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.tab button{border:0;background:none;padding:.75rem .625rem;font:inherit;font-size:.9375rem;
  font-weight:500;color:var(--tinta-2);cursor:pointer;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;min-height:2.75rem;
  scroll-snap-align:start;transition:color 150ms ease-out}
.tab button[aria-pressed="true"]{color:var(--ungu);border-bottom-color:var(--ungu);font-weight:700}
@media (min-width:640px){.tab button{padding:.8125rem .875rem}}

.keadaan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:1.25rem 0 .5rem;
  border:1px solid var(--garis);border-radius:var(--r);overflow:hidden;
  background:var(--alas);color:var(--tinta)}
.keadaan>div{padding:.75rem 1rem;border-top:1px solid var(--garis);border-left:1px solid var(--garis)}
.keadaan>div:nth-child(-n+2){border-top:0}
.keadaan>div:nth-child(odd){border-left:0}
.keadaan dt{font-size:.8125rem;color:var(--tinta-2)}
.keadaan dd{margin:.125rem 0 0;font-size:1.125rem;font-weight:700;font-variant-numeric:tabular-nums}
.keadaan .sub{display:block;font-size:.8125rem;color:var(--tinta-2);font-weight:400}
@media (min-width:900px){
  .keadaan{grid-template-columns:repeat(5,minmax(0,1fr))}
  .keadaan>div{border-top:0}
  .keadaan>div:nth-child(odd){border-left:1px solid var(--garis)}
  .keadaan>div:first-child{border-left:0}
}

.kerja{display:grid;gap:1.25rem;align-items:start;padding:1.25rem 0 3.5rem}
@media (min-width:940px){.kerja{grid-template-columns:minmax(0,1fr) 21.5rem}.lebar{grid-column:1/-1}}
.panel{background:var(--alas);color:var(--tinta);border:1px solid var(--garis);
  border-radius:var(--r);overflow:hidden}
.panel>header{padding:.875rem 1rem;border-bottom:1px solid var(--garis);display:flex;
  align-items:center;gap:.625rem;flex-wrap:wrap}
.panel>header h2{font-size:1rem}
.panel>header .kanan{margin-left:auto;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.badan{padding:1rem}
@media (max-width:639px){
  .panel>header .kanan{margin-left:0;width:100%}
  .panel>header .kanan>*{flex:1 1 auto}
}
@media (min-width:640px){.panel>header{padding:.875rem 1.125rem}.badan{padding:1.125rem}}

/* ═══════════════════════════════════════════════════════════════
   6. TABEL — dan trik supaya enak dibaca di HP

   Di bawah 768px baris tabel berubah jadi kartu: judul kolom
   disembunyikan, lalu setiap sel menampilkan labelnya sendiri lewat
   content:attr(data-label). Atribut data-label itu dipasang oleh
   fungsi tabelData() di aplikasi.js. Jadi kalau kamu bikin tabel
   baru, pakai tabelData() supaya otomatis rapi di HP.
   ═══════════════════════════════════════════════════════════════ */
.gulung{overflow-x:auto}
.gulung table{width:100%;border-collapse:collapse;font-size:.9375rem}
.gulung th{text-align:left;font-size:.8125rem;color:var(--tinta-2);font-weight:700;
  padding:.625rem 1rem;border-bottom:1px solid var(--garis-2);white-space:nowrap}
.gulung td{padding:.6875rem 1rem;border-bottom:1px solid var(--garis);vertical-align:middle}
.gulung tbody tr:last-child td{border-bottom:0}
td.angka,td.data{font-variant-numeric:tabular-nums;white-space:nowrap}
td.angka{text-align:right}
td.aksi{text-align:right;white-space:nowrap}
.padat{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

@media (max-width:767px){
  .gulung{overflow-x:visible}
  .gulung thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .gulung tr{display:block;padding:.75rem 0;border-bottom:1px solid var(--garis)}
  .gulung tbody tr:last-child{border-bottom:0}
  .gulung td{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.75rem;align-items:baseline;
    border:0;padding:.3125rem 1rem;text-align:left}
  .gulung td::before{content:attr(data-label);color:var(--tinta-2);font-size:.8125rem}
  .gulung td[data-label=""]{grid-template-columns:minmax(0,1fr);padding-top:.5rem}
  .gulung td[data-label=""]::before{display:none}
  td.angka{text-align:left}
  td.aksi{text-align:left}
}
@media (min-width:768px){.gulung tbody tr{transition:background 150ms ease-out}
  .gulung tbody tr:hover{background:var(--alas-2)}}

.hampa{padding:2rem 1rem;text-align:center;color:var(--tinta-2);font-size:.9375rem;
  display:grid;gap:.875rem;justify-items:center}

.cip{display:inline-flex;align-items:center;gap:.375rem;padding:.1875rem .625rem;
  border-radius:999px;font-size:.8125rem;font-weight:500;white-space:nowrap}
.cip.ok{background:var(--lumut-tipis);color:var(--lumut)}
.cip.tunggu{background:var(--tanah-tipis);color:var(--tanah)}
.cip.stop{background:var(--bara-tipis);color:var(--bara)}
.cip.diam{background:var(--ungu-tipis);color:var(--ungu)}
.titik{width:.5rem;height:.5rem;border-radius:999px;flex:none}

.pesan{display:flex;gap:.6875rem;align-items:flex-start;padding:.8125rem 1rem;
  border-radius:var(--r-kecil);font-size:.9375rem;background:var(--ungu-tipis);
  border:1px solid var(--garis);color:var(--tinta)}
.pesan.awas{background:var(--tanah-tipis)}
.pesan svg{margin-top:.1875rem;color:var(--ungu)}
.pesan.awas svg{color:var(--tanah)}

/* ═══════════════════════════════════════════════════════════════
   7. KENDALI — kolom isian, tombol, dan tautan

   min-height 2.75rem (44px) itu ukuran minimum yang nyaman disentuh
   jari. Jangan dikecilkan untuk tampilan HP.
   ═══════════════════════════════════════════════════════════════ */
label{display:block;font-size:.875rem;font-weight:500;color:var(--tinta-2);margin-bottom:.3125rem}
input,select,textarea{width:100%;padding:.625rem .6875rem;border:1px solid var(--garis-2);
  border-radius:var(--r-kecil);background:var(--kanvas);color:var(--tinta);font:inherit;
  font-size:1rem;min-height:2.75rem;transition:border-color 150ms ease-out}
input:hover,select:hover,textarea:hover{border-color:var(--tinta-2)}
input:focus,select:focus,textarea:focus{border-color:var(--ungu)}
input::placeholder,textarea::placeholder{color:var(--tinta-2);opacity:.85}
input[type=file]{padding:.5rem}
textarea{resize:vertical;min-height:4.5rem}
.deret{display:grid;gap:.8125rem}
@media (min-width:520px){.deret.dua{grid-template-columns:1fr 1fr}}

.tbl{border:1px solid transparent;background:var(--ungu);color:var(--pada-ungu);
  padding:.625rem 1.0625rem;border-radius:var(--r-kecil);font:inherit;font-size:.9375rem;
  font-weight:700;cursor:pointer;width:100%;min-height:2.75rem;white-space:nowrap;
  transition:opacity 150ms ease-out}
.tbl:hover:not(:disabled){opacity:.88}
.tbl:disabled{opacity:.45;cursor:not-allowed}
.tbl.sunyi{background:none;border-color:var(--garis-2);color:var(--tinta);width:auto}
.tbl.sunyi:hover:not(:disabled){border-color:var(--ungu);color:var(--ungu);opacity:1}
.tbl.rusak{background:var(--bara)}
.tbl.mungil{width:auto;padding:.4375rem .75rem;font-size:.875rem;
  display:inline-flex;align-items:center;gap:.375rem;min-height:2.5rem}
.taut{border:0;background:none;color:var(--ungu);font:inherit;font-size:.875rem;font-weight:500;
  cursor:pointer;padding:.375rem .5rem;border-radius:.25rem;min-height:2.75rem;
  transition:background 150ms ease-out}
.taut:hover{background:var(--ungu-tipis)}
.taut.bahaya{color:var(--bara)}
.taut.bahaya:hover{background:var(--bara-tipis)}
@media (min-width:768px){.taut{min-height:2.25rem}}
.cari{max-width:100%;width:100%}
@media (min-width:640px){.cari{max-width:13.75rem}}
.bantu{font-size:.875rem;color:var(--tinta-2);margin-top:.5625rem;line-height:1.55;max-width:60ch}
.salah{font-size:.875rem;color:var(--bara);margin-top:.5625rem}
.salah:empty{display:none}

.hasil{margin-top:.875rem;padding:.8125rem .9375rem;background:var(--alas-2);border-radius:var(--r-kecil)}
.hasil dt{font-size:.8125rem;color:var(--tinta-2);font-weight:700}
.hasil dd{margin:.375rem 0 0;font-size:1rem;font-weight:700;word-break:break-all;
  font-variant-numeric:tabular-nums}

/* ═══════════════════════════════════════════════════════════════
   8. DIALOG — kotak konfirmasi hapus dan isian singkat
   Memakai elemen <dialog> bawaan peramban, jadi tombol Esc, jebakan
   fokus, dan latar gelap sudah jalan sendiri tanpa kode tambahan.
   ═══════════════════════════════════════════════════════════════ */
dialog{border:1px solid var(--garis);background:var(--alas);color:var(--tinta);
  border-radius:var(--r);padding:0;width:min(26rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem)}
dialog::backdrop{background:rgb(20 14 26 / .55)}
dialog .badan{display:grid;gap:.75rem}
dialog h2{font-size:1.0625rem}
dialog p{color:var(--tinta-2);font-size:.9375rem}
.dialog-aksi{display:grid;gap:.5rem;margin-top:.25rem}
@media (min-width:400px){.dialog-aksi{grid-template-columns:1fr 1fr}}

/* ═══════════════════════════════════════════════════════════════
   9. KARTU TANDA ANGGOTA
   aspect-ratio 85.6/54 itu ukuran kartu ATM/KTP sungguhan, jadi
   proporsinya benar berapa pun lebar layarnya.
   ═══════════════════════════════════════════════════════════════ */
.kta{aspect-ratio:85.6/54;border-radius:.5625rem;padding:.875rem 1rem;position:relative;
  overflow:hidden;background:var(--ungu-terang);color:#FFF;
  display:grid;grid-template-columns:4rem minmax(0,1fr);gap:.8125rem}
.kta::after{content:"";position:absolute;inset:0;background:var(--logo) center/58% no-repeat;
  opacity:.14;mix-blend-mode:screen}
.kta .kop{position:absolute;top:.625rem;left:1rem;right:1rem;font-size:.625rem;opacity:.92}
.kta .foto{width:4rem;height:5rem;border-radius:.3125rem;background:rgb(255 255 255 / .17);
  border:1px solid rgb(255 255 255 / .4);display:grid;place-items:center;font-size:.625rem;
  text-align:center;margin-top:1rem;position:relative;z-index:var(--z-lokal);line-height:1.35}
.kta dl{margin:1rem 0 0;position:relative;z-index:var(--z-lokal);min-width:0}
.kta dt{font-size:.5625rem;opacity:.78;margin-top:.375rem}
.kta dd{margin:0;font-size:.8125rem;font-weight:700;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis}
.kta dd.data{font-variant-numeric:tabular-nums;font-weight:500}
.kta .ttd{position:absolute;right:1rem;bottom:.6875rem;font-size:.5625rem;opacity:.85;
  text-align:right;line-height:1.5;z-index:var(--z-lokal);white-space:pre-line}

.berkas-cip{display:inline-flex;align-items:center;gap:.375rem;font:inherit;font-size:.875rem;
  color:var(--ungu);background:none;border:0;cursor:pointer;padding:.375rem .5rem;
  border-radius:.25rem;min-height:2.75rem}
.berkas-cip:hover{background:var(--ungu-tipis)}
@media (min-width:768px){.berkas-cip{min-height:2.25rem}}

.kaki{padding:1.5rem 0 3rem;color:var(--tinta-2);font-size:.875rem;line-height:1.7;
  border-top:1px solid var(--garis);
  padding-bottom:max(3rem,env(safe-area-inset-bottom))}