/* leve-tampilan.css (2026-10-02) -- dipakai SEMUA situs LEVE; salinan IDENTIK ada di tiap repo situs (hub, report, sales,
   owner, rekap, ops, team, pks, finance, host, invoice, pengawas, absen). Kalau diubah, salin ke semuanya + naikkan ?v=.
   Dimuat PALING AKHIR di <head> supaya menang dari gaya bawaan halaman.

   1. Merek: tulisan "LEVE <Nama situs>" bergaya LEVE Finance -- "LEVE" tebal hijau, nama situs lebih tipis & abu.
      <div class="leve-wm">LEVE <span>Ops</span></div>   (+ .terang di latar gelap, + .kop untuk baris sendiri)
   2. Layar PC (>= 1024px): isi halaman memakai lebar layar (maks 1680px) dengan jarak tepi menyesuaikan layar -- dulu
      tiap halaman dikunci 520-1300px di tengah, jadi di monitor lebar ada ruang kosong besar kiri-kanan.
      Kontainer utama halaman diberi kelas .leve-lebar; kontainer di dalamnya yang ikut dibatasi diberi .leve-penuh; blok di luar <main> diberi .leve-blok;
      kop/header berlatar penuh diberi .leve-kop supaya teksnya sejajar dengan isi.
      Formulir panjang: .leve-kolom = isian mengalir 2 kolom ala koran (urutan tetap, cocok untuk label+isian tanpa
      pembungkus); .leve-kartu2 = kartu-kartu bagian formulir disusun 2 per baris. .leve-baris = elemen selebar penuh.
      Tampilan HP tidak berubah. */

.leve-wm{ display:inline-flex; align-items:baseline; gap:.32em; font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-weight:700; font-size:18px; letter-spacing:.02em; line-height:1.25; color:#2F4A36; text-transform:none; white-space:nowrap; }
.leve-wm span{ font-weight:500; color:#6B7A70; letter-spacing:.01em; }
.leve-wm.terang{ color:#FFFFFF; }
.leve-wm.terang span{ color:rgba(255,255,255,.62); }
.leve-wm.kop{ display:flex; margin:0 0 10px; }
.leve-wm.tengah{ justify-content:center; }
.leve-wm.kecil{ font-size:15px; }

@media (min-width:1024px){
  :root{ --leve-lebar:1680px; --leve-tepi:clamp(24px, 3vw, 56px); }
  .leve-lebar{ max-width:var(--leve-lebar) !important; width:auto !important; margin-left:auto !important; margin-right:auto !important;
    padding-left:var(--leve-tepi) !important; padding-right:var(--leve-tepi) !important; box-sizing:border-box !important; }
  .leve-penuh{ max-width:none !important; width:auto !important; margin-left:0 !important; margin-right:0 !important; }
  /* blok berlatar sendiri di LUAR <main> (mis. kartu atas beranda Ops): selebar isi halaman, padding blok tidak diubah */
  .leve-blok{ max-width:none !important; width:auto !important;
    margin-left:max(var(--leve-tepi), calc((100% - var(--leve-lebar)) / 2 + var(--leve-tepi))) !important;
    margin-right:max(var(--leve-tepi), calc((100% - var(--leve-lebar)) / 2 + var(--leve-tepi))) !important; }
  .leve-kop{ padding-left:max(var(--leve-tepi), calc((100% - var(--leve-lebar)) / 2 + var(--leve-tepi))) !important;
    padding-right:max(var(--leve-tepi), calc((100% - var(--leve-lebar)) / 2 + var(--leve-tepi))) !important; }
  .leve-kolom{ column-count:2; column-gap:40px; }
  .leve-kolom > *{ break-inside:avoid; }
  .leve-kolom label{ break-after:avoid; }
  .leve-kolom > h2, .leve-kolom > .section-head, .leve-kolom > .leve-baris{ column-span:all; }
  .leve-kartu2{ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; align-items:start; }
  .leve-kartu2 > *{ margin-bottom:0 !important; min-width:0; }
  .leve-kartu2 > .leve-baris{ grid-column:1 / -1; }
}