/*
 * Gaya situs publik Office -- meniru tema Jannah yang dipakai situs PPI sekarang.
 *
 * CSS ini DITULIS SENDIRI, bukan salinan berkas Jannah. Yang diambil hanya
 * bahasa rupanya, dan nilainya diukur langsung dari ppi.uinmataram.ac.id:
 *
 *   lebar wadah   1200px (isi 1170px)      badan laman   #f7f7f7
 *   teks          #2c2f34, 13px            hijau tema    #03726b
 *   bilah atas    putih, tinggi 41px       menu          tinggi 60px, 14px/700 putih
 *   judul bagian  Poppins 18px/600 hijau   judul pos     Poppins 20px/28px/600
 *   meta pos      12px #666                gambar pos    368x208, tanpa sudut membulat
 *   kaki          #1f2024                  huruf judul   Poppins
 *
 * Dengan menulis ulang sendiri, Office bebas dijual tanpa menumpang lisensi
 * ThemeForest milik Jannah.
 */

:root {
    --j-hijau:      #03726b;
    --j-hijau-tua:  #025a55;
    --j-kuning:     #ffc107;   /* garis penanda menu aktif */
    --j-navbar:     #064A3D;   /* bilah menu: hijau tua, semuda-mudanya */
    --j-navbar-2:   #042E26;   /* butir menu aktif & penandanya: hijau pekat */
    --j-teks:       #2c2f34;
    --j-redup:      #666666;
    --j-garis:      #e8e8e8;
    --j-bg:         #f7f7f7;
    --j-kaki:       #1f2024;
    --j-merah:      #d0021b;   /* label Breaking News */
    --j-wadah:      1200px;
}

* { box-sizing: border-box; }
/* Huruf sama persis dengan Office: Montserrat, berkasnya sudah ada di dalam
   aplikasi (assets/adminlte/dist/css/montserrat.css), jadi tidak mengambil
   dari Google. Ukuran dasar 14px mengikuti Office, bukan 13px bawaan Jannah. */
body {
    margin: 0; background: var(--j-bg); color: var(--j-teks);
    font-family: Montserrat, "Source Sans Pro", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px; line-height: 1.65;
}
a { color: var(--j-hijau); text-decoration: none; }
a:hover { color: var(--j-hijau-tua); }
h1, h2, h3, h4 { font-family: inherit; margin: 0; color: var(--j-teks); }
img { max-width: 100%; height: auto; display: block; }

.wadah { width: 100%; max-width: var(--j-wadah); margin: 0 auto; padding: 0 15px; }

/* ===================== bilah atas ===================== */
.bilah-atas { background: #fff; border-bottom: 1px solid var(--j-garis); font-size: 13px; }
.bilah-atas .wadah { display: flex; align-items: center; gap: 16px; height: 41px; }
/* Tanggal hari ini diperlakukan sama dengan periode berjalan di sisi kanan:
   ikon kecil, huruf tebal, warna hijau merek. Label merah "Terbaru" dan
   judul pos terbaru dibuang dari sini atas permintaan Bapak. */
.bilah-atas .tanggal {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--j-hijau); font-weight: 600; white-space: nowrap;
}
.bilah-atas .tanggal i { font-size: 12px; }
.label-merah {
    background: var(--j-merah); color: #fff; font-weight: 600; font-size: 11.5px;
    padding: 4px 10px; border-radius: 0; white-space: nowrap;
}
.bilah-atas .sorot { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1 1 auto; }
.bilah-atas .sorot a { color: var(--j-teks); }
.bilah-atas .kanan { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.bilah-atas .kanan a { color: var(--j-redup); }
/* Periode akademik berjalan. Nilainya tidak diketik tangan: diambil dari
   master_tp dan master_smt di basis data Office lewat setel_periode.py. */
.bilah-atas .periode {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--j-hijau); font-weight: 600; white-space: nowrap;
    /* Kini berada di area kiri, setelah tanggal, jadi pemisahnya di sisi KIRI. */
    padding-left: 14px; border-left: 1px solid var(--j-garis);
}
.bilah-atas .periode i { font-size: 12px; }
.tombol-masuk {
    background: var(--j-hijau); color: #fff !important; font-weight: 600;
    padding: 6px 16px; border-radius: 0; font-size: 12.5px; white-space: nowrap;
}
.tombol-masuk:hover { background: var(--j-hijau-tua); }

/* ===================== kop logo ===================== */
/* Satu-satunya blok putih di kepala laman. Padding bawah 60px adalah ruang
   untuk bilah menu, yang ditarik naik menindihnya -- dengan begitu putihnya
   MENYATU dari bilah atas sampai batas bawah menu, bukan dua blok terpisah.
   Bayangannya pun tinggal satu, di batas bawah blok ini. */
.kop { background: #fff; padding-bottom: 60px; box-shadow: 0 5px 12px rgba(0, 0, 0, .18); }
.kop .wadah { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; padding-bottom: 22px; }
.kop img { height: 88px; width: auto; }

/* ===================== menu utama ===================== */
/* Bilah menu ditarik naik 60px supaya duduk DI DALAM blok putih .kop, bukan
   membawa blok putihnya sendiri. Ia tidak punya latar dan tidak berbayang;
   yang terlihat hanya kotak gelapnya selebar isi laman. Saat menempel,
   barulah ia mengambil alih: gelap penuh selebar layar. */
.menu-utama {
    background: transparent; margin-top: -60px;
    position: sticky; top: 0; z-index: 900; overflow: visible;
}
.menu-utama .wadah { background: transparent; }
.menu-utama .bilah {
    display: flex; align-items: stretch; width: 100%; height: 60px;
    background: var(--j-navbar);
}
/* Saat MENEMPEL: pita putih hilang, bilah gelap melebar penuh selebar layar.
   Butir menunya tetap sebaris dengan isi laman karena .wadah tidak diubah. */
.menu-utama.lengket { background: var(--j-navbar); box-shadow: 0 4px 12px rgba(0, 0, 0, .28); }
.menu-utama.lengket .bilah { background: transparent; }
/* Tinggi bilah DIKUNCI 60px. Dulu ia ikut melar jadi 75px pada layar sempit
   karena batang gulir mendatar menambah tinggi, sehingga penanda menu aktif
   yang menempel di dasar tautan (60px) tampak keluar dari bilahnya. */
.menu-utama .wadah { display: flex; height: 60px; }
.menu-utama ul { display: flex; list-style: none; margin: 0; padding: 0; height: 60px; }
.menu-utama li { display: flex; }
.menu-utama li > a {
    display: flex; align-items: center; gap: 7px; height: 60px;
    padding: 0 25px 0 14px; color: #fff; font-size: 14px; font-weight: 700;
}
.menu-utama li > a i.fa-angle-down { font-size: 12px; opacity: .8; }
.menu-utama li > a:hover { background: var(--j-navbar-2); color: #fff; }
/* Penanda aktif MENONJOL KELUAR 4px di bawah garis bilah, seperti lidah tab.
   Tinggi bilah tetap 60px; penanda digambar di luar kotaknya lewat ::after
   sehingga tidak menambah tinggi apa pun. */
.menu-utama li.aktif > a {
    background: var(--j-navbar-2); color: #fff; position: relative;
}
.menu-utama li.aktif > a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -5px;
    height: 4px; background: var(--j-navbar-2);
}
/* Submenu (butir beranak, dari web_menu -- app/Views/situs/_menu.php).
   Layar lebar: kotak tarik-turun tepat di bawah bilah, muncul saat butir
   induk disorot atau difokus (papan ketik/sentuh). */
.menu-utama li.beranak { position: relative; }
.menu-utama ul.submenu {
    display: none; position: absolute; top: 60px; left: 0; z-index: 920;
    flex-direction: column; height: auto; min-width: 240px;
    background: var(--j-navbar); box-shadow: 0 8px 16px rgba(0, 0, 0, .28);
}
.menu-utama li.beranak:hover > ul.submenu,
.menu-utama li.beranak:focus-within > ul.submenu { display: flex; }
.menu-utama ul.submenu li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
.menu-utama ul.submenu li > a {
    flex: 1 1 auto; height: auto; min-height: 42px; padding: 10px 18px;
    font-size: 13.5px; font-weight: 600;
}
.menu-utama ul.submenu li.aktif > a::after { content: none; }
/* Kotak cari -- resep Jannah, diukur dari ppi.uinmataram.ac.id:
 *   bidangnya berlatar putih tembus 10%, tanpa garis tepi, dan ikon kaca
 *   pembesarnya DI DALAM kotak di sisi kanan, bukan tombol berwarna terpisah.
 * Sudutnya dibulatkan 50px persis seperti Jannah -- ini satu-satunya
 * pengecualian dari ketentuan "tanpa lengkungan", atas permintaan Bapak.
 *
 * JARAK KE TEPI KANAN disamakan dengan jarak ke atas dan ke bawah: bilah
 * setinggi 60px berisi kotak setinggi 36px, jadi sisa atas-bawah (60-36)/2 =
 * 12px. Karena itu margin-right-nya juga 12px, sehingga kotak duduk di tengah
 * sebuah bingkai 12px yang sama rata di tiga sisinya. */
.menu-utama .cari {
    position: relative; margin-left: auto; align-self: center;
    margin-right: 12px;
    display: flex; align-items: center;
    width: 230px; height: 36px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .10);
    transition: background .15s ease, width .15s ease;
}
.menu-utama .cari:focus-within { background: rgba(255, 255, 255, .17); width: 262px; }
.menu-utama .cari input {
    width: 100%; height: 36px; border: 0; background: transparent;
    padding: 0 40px 0 18px; font: inherit; font-size: 12.5px;
    color: rgba(255, 255, 255, .92); outline: none;
}
.menu-utama .cari input::placeholder { color: rgba(255, 255, 255, .45); }
.menu-utama .cari button {
    position: absolute; right: 0; top: 0;
    width: 40px; height: 36px; border: 0; background: transparent;
    border-radius: 0 50px 50px 0;
    color: rgba(255, 255, 255, .55); font-size: 13.5px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color .15s ease;
}
.menu-utama .cari button:hover,
.menu-utama .cari:focus-within button { color: #fff; }

/* ===================== spanduk ===================== */
/* ===================== spanduk: area gambar ===================== */
/* Bidang gambar beranda. Ukurannya dipatok 1170 x 300 px supaya letak blok di
   bawahnya tidak pernah bergeser, gambar apa pun yang dipasang. Gambar
   dipotong rapi dengan object-fit: cover. */
/* Latar putih berhenti di garis bilah menu. Bidang spanduk dan seterusnya
   memakai latar badan laman (#f7f7f7). */
.spanduk { background: transparent; }
.spanduk .bidang {
    position: relative; width: 100%; margin: 22px 0 0;
    line-height: 0;   /* buang celah bawah bawaan gambar sebaris */
}
.spanduk .bidang img { width: 100%; height: auto; display: block; }

/* Bila gambarnya belum dipasang, bidangnya cukup kosong berwarna abu muda. */

/* ===================== kerangka isi ===================== */
/* Bagian yang melebar penuh, tanpa bilah samping di kanannya. Dipakai untuk
   Pengumuman di laman depan. Jarak atasnya mengambil alih padding-atas .badan
   yang lama (34px), dan jarak ke bagian berikutnya tetap 38px seperti semula. */
/* Garis rambut di bawahnya memisahkan Pengumuman dari bagian di bawahnya.
   Jarak 30px di atas dan 30px di bawah garis (padding-atas .badan) supaya
   garisnya duduk tepat di tengah, bukan menempel ke salah satu sisi. */
.bagian-penuh { padding: 34px 0 30px; border-bottom: 1px solid var(--j-garis); }
.bagian-penuh .kisi { margin-bottom: 0; }

/* Karena lebarnya sekarang 1170px penuh (bukan 790px), kartunya muat empat
   sejajar; kalau tetap tiga, tiap kartu jadi 374px dan gambarnya terlalu besar
   untuk sekadar pengumuman. */
.bagian-penuh .kisi { grid-template-columns: repeat(4, 1fr); }

/* Bilah samping DICABUT dari beranda atas permintaan Bapak, jadi .badan tidak
   lagi berupa kisi dua kolom: seluruh isinya memakai lebar penuh 1170px.
   padding-atasnya tetap 30px, menyeimbangi 30px di bawah garis pemisah
   Pengumuman. */
.badan { padding: 30px 0 40px; }
/* Laman POS PENUH masih memakai bilah samping, jadi kisi dua kolom yang lama
   tetap tersedia lewat kelas tambahan .bersamping. Beranda tidak memakainya. */
.badan.bersamping { display: grid; grid-template-columns: 1fr 350px; gap: 30px; align-items: start; }

/* Judul bagian -- resep Jannah, diukur dari ppi.uinmataram.ac.id:
 *   wadah      : position relative, border-bottom 1.6px rgba(0,0,0,.1),
 *                padding-bottom 15px, margin-bottom 20px
 *   ::after    : batang tebal 40 x 2px menindih garis tipis, di ujung kiri
 *   ::before   : segitiga 4.8px menggantung di bawah ujung kiri batang
 * Tanpa kotak, tanpa latar -- judulnya duduk langsung di atas laman. */
.judul-bagian {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1.6px solid rgba(0, 0, 0, .1);
    padding: 0 0 15px; margin: 0 0 20px;
}
.judul-bagian::after {
    content: ""; position: absolute; left: 0; bottom: -2px;
    width: 40px; height: 2px; background: var(--j-hijau);
}
.judul-bagian::before {
    content: ""; position: absolute; left: 0; bottom: -5px;
    width: 0; height: 0;
    border-style: solid; border-width: 4.8px 4.8px 0 0;
    border-color: var(--j-hijau) transparent transparent transparent;
}
/* TINGGI BARIS DIPATOK 30px, sama dengan judul blok di bilah samping.
   Sebelumnya h2 18px mengambil tinggi baris 29,7px sedangkan h4 15px di
   sidebar cuma 24,75px, sehingga garis bawah "Berita Terbaru" jatuh 4,95px
   lebih rendah daripada garis bawah blok sidebar pertama. */
.judul-bagian h2 {
    font-size: 18px; font-weight: 600; color: var(--j-hijau); line-height: 30px;
    display: flex; align-items: center; gap: 8px;
}
.judul-bagian .semua { margin-left: auto; font-size: 12.5px; font-weight: 600; }

/* ===================== sekilas program studi ===================== */
/* Empat blok sejajar: peringkat akreditasi, bar publikasi, donat
   mahasiswa-alumni, dan agenda (publikasi dan donat ditukar atas permintaan
   Bapak; keduanya sama-sama 1fr, jadi lebar lajurnya tidak berubah). Lebarnya tidak sama rata -- lencana akreditasi cuma
   berisi beberapa baris pendek, sedangkan agenda perlu ruang untuk judul
   kegiatan, jadi porsinya .85 : 1 : 1 : 1.25. */
/* TINGGI KEEMPAT BLOK DISAMAKAN. Dulu ada `align-items: start` yang membuat
   tiap blok menciut setinggi isinya sendiri; begitu dilepas, kisi kembali ke
   perilaku bawaannya (stretch) dan semuanya ikut setinggi blok tertinggi.
   Tiap blok lalu dijadikan kolom lentur supaya sisa ruangnya terpakai, bukan
   menganggur di bawah:
     - akreditasi : isinya ditengahkan tegak
     - donat      : donatnya ditengahkan pada sisa ruang di bawah judul
     - publikasi  : catatan sumber didorong menempel ke dasar blok */
.sekilas { display: grid; grid-template-columns: .85fr 1fr 1fr 1.25fr; gap: 30px; }
.sekilas .blok { display: flex; flex-direction: column; }
.sekilas .blok .donat { flex: 1 1 auto; }
/* Judul tiap blok memakai resep garis yang sama dengan judul bagian: garis
   tipis 1,6px, ditindih batang hijau 40x2px di ujung kiri, dengan segitiga
   kecil menggantung di bawahnya. Ruangnya lebih rapat (10px/16px, bukan
   15px/20px) karena judul di sini 13px, bukan 18px. */
.sekilas .blok h4 {
    position: relative;
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: var(--j-teks);
    border-bottom: 1.6px solid rgba(0, 0, 0, .1);
    padding: 0 0 10px; margin: 0 0 16px;
}
.sekilas .blok h4::after {
    content: ""; position: absolute; left: 0; bottom: -2px;
    width: 40px; height: 2px; background: var(--j-hijau);
}
.sekilas .blok h4::before {
    content: ""; position: absolute; left: 0; bottom: -5px;
    width: 0; height: 0; border-style: solid; border-width: 4.8px 4.8px 0 0;
    border-color: var(--j-hijau) transparent transparent transparent;
}
.sekilas .blok h4 i { color: var(--j-hijau); font-size: 12px; }
.sekilas .sumber { font-size: 10.5px; color: var(--j-redup); line-height: 1.6; margin: 12px 0 0; }
.sekilas .blok .sumber { margin-top: auto; padding-top: 12px; }

/* --- 1. peringkat akreditasi --- */
.akreditasi {
    background: linear-gradient(135deg, var(--j-hijau) 0%, var(--j-hijau-tua) 100%);
    color: #fff; text-align: center; padding: 22px 18px;
    /* Kotak hijau kini berada DI BAWAH judul "Status Akreditasi", bukan
       menjadi bloknya sendiri, jadi ia yang memanjang mengisi sisa ruang. */
    flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
}
.akreditasi .lencana { width: 58px; height: 58px; margin: 0 auto 12px; display: block; }
.akreditasi .nilai { font-size: 25px; font-weight: 700; letter-spacing: .07em; line-height: 1.2; }
.akreditasi .oleh { font-size: 11.5px; color: rgba(255, 255, 255, .82); margin-top: 3px; }
.akreditasi .sk {
    font-size: 10px; color: rgba(255, 255, 255, .62); line-height: 1.6;
    margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, .2);
}
.akreditasi .berlaku { font-size: 10px; color: rgba(255, 255, 255, .62); line-height: 1.6; margin-top: 3px; }

/* --- 2. donat --- */
/* Dua warna ini lolos pemeriksa buta warna: beda ΔE 16,6 (protan) dan 23,9 pada
   penglihatan biasa, jauh di atas ambang 8. Keduanya sudah dipakai di laman
   ini -- hijau merek dan kuning tua yang sama dengan ikon meta. */
/* Donat SEBARIS SENDIRI dan SELEBAR KOLOM. Karena SVG memakai viewBox, ia
   ikut membesar mengikuti lebar apa pun tanpa kehilangan ketajaman. */
/* Dipatok ke ATAS, bukan ditengahkan: tepi atas donat jadi sebaris persis
   dengan tepi atas kotak Unggul dan daftar publikasi, karena semuanya
   sama-sama mulai tepat di bawah judul bloknya. */
.donat { display: flex; align-items: flex-start; justify-content: center; flex: 1 1 auto; }
/* 88% lebar kolom -- menyisakan sedikit ruang napas di kiri-kanan, tidak
   lagi menempel rata ke tepi bidangnya. */
.donat svg { width: 88%; height: auto; max-width: 100%; }
.donat .d-angka { font-size: 26px; font-weight: 700; fill: var(--j-teks); text-anchor: middle; }
.donat .d-ket { font-size: 11px; fill: var(--j-redup); text-anchor: middle; }
/* Keterangan: SATU BUTIR SATU BARIS, ditumpuk ke bawah. Hurufnya 10px supaya
   nama dan angkanya muat sebaris penuh tanpa melipat. */
.sekilas .ket {
    display: block; margin: 14px 0 0; padding: 0; list-style: none;
    font-size: 10px; color: var(--j-redup);
}
.sekilas .ket li {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    white-space: nowrap; padding: 3px 0;
}
.sekilas .kotak { flex: 0 0 9px; width: 9px; height: 9px; }
.sekilas .angka { font-weight: 600; color: var(--j-teks); }

/* --- 3. bar publikasi --- */
/* SATU warna saja, bukan empat: batangnya mengukur besaran yang sama (jumlah
   publikasi), bukan empat hal yang berbeda jenis. Memberi tiap batang warna
   sendiri justru menyiratkan perbedaan yang tidak ada. */
/* Daftar publikasi dan agenda TIDAK dipaksa mengisi tinggi blok. Sempat
   disebar merata (justify-content: space-between) agar tidak menyisakan ruang
   di bawah, tetapi itu justru merenggangkan jarak antarbutir sehingga
   daftarnya terlihat jomplang. Lebih baik jaraknya tetap dan sisa ruangnya
   dibiarkan kosong di bawah. */
.bar-daftar { margin: 0; padding: 0; list-style: none; }
.bar-daftar li { margin-bottom: 11px; }
.bar-daftar li:last-child { margin-bottom: 0; }
.bar-daftar .baris-label {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    font-size: 11px; color: var(--j-redup); margin-bottom: 5px;
}
.bar-daftar .nilai { font-size: 12px; font-weight: 600; color: var(--j-teks); }
.bar-daftar .alur { display: block; height: 8px; background: #e6ebe9; }
.bar-daftar .isi { display: block; height: 8px; background: var(--j-hijau); }

/* ===================== kisi pos ===================== */
.kisi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 38px; }
.pos .gambar {
    position: relative; background: #e9eeec; aspect-ratio: 368 / 208;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center; color: #b9c6c2; font-size: 26px;
}
/* Gambar sorot DIPATOK memenuhi kotak lalu DIPANGKAS bagian lebihnya. Tanpa
   ini, gambar yang nisbahnya berbeda dari 368:208 -- seperti pengumuman KRS
   yang baru masuk -- ikut menentukan tingginya sendiri dan kartunya jadi tidak
   sama tinggi. */
.pos .gambar img { width: 100%; height: 100%; object-fit: cover; }
.pos .gambar .rubrik {
    position: absolute; left: 10px; bottom: 10px;
    background: var(--j-hijau); color: #fff; font-size: 11px; font-weight: 600;
    padding: 4px 10px; border-radius: 0;
}
/* Judul kartu pengumuman.
 *
 * Dulu 20px/28px -- itu ukuran judul untuk kolom LEBAR. Di kisi tiga kolom
 * kartunya cuma sekitar 250px, sehingga judul pengumuman yang memang panjang
 * ("Pengumuman Daftar Judul Skripsi & Pembimbing 16 September 2026") melar
 * sampai lima baris setinggi 140px -- lebih tinggi daripada gambarnya sendiri.
 *
 * Sekarang disamakan dengan judul daftar berita, 16px, dan DIPATOK tiga baris.
 * Dengan begitu ketiga kartu selalu sama tinggi, sepanjang apa pun judulnya. */
.pos h3 {
    /* 16 -> 14,5px (permintaan Bapak: huruf beranda diperkecil seiring isi
       tulisan). Tinggi tetap 3 baris ikut turun 69 -> 63px. */
    font-size: 14.5px; font-weight: 600; line-height: 21px; margin: 10px 0 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; height: 63px;
    /* TINGGI TETAP, bukan sekadar batas atas: judul yang cuma dua baris pun
       tetap memakai ruang tiga baris, supaya baris meta di semua kartu
       berada pada ketinggian yang sama. */
}
.pos h3 a { color: var(--j-teks); }
.pos h3 a:hover { color: var(--j-hijau); }
.pos .meta { font-size: 12px; color: var(--j-redup); display: flex; flex-wrap: wrap; gap: 14px; }
.pos .meta span { display: inline-flex; align-items: center; gap: 5px; }
.pos p { margin: 10px 0 0; color: #555; }

/* Daftar berita mendatar: gambar kiri, teks kanan.
 *
 * GAMBARNYA DIPATOK TETAP 200x125 px -- tidak pernah berubah, berapa pun
 * panjang judul atau ringkasannya. Yang menyesuaikan adalah TEKSNYA: blok
 * kanan dikunci setinggi gambar, judul dipotong dua baris, ringkasan dua
 * baris. Dengan begitu tiap baris berita tingginya sama persis.
 *
 * Perhitungan tinggi 140px, setelah meta dijepit dua garis rambut:
 *   judul 2 x 24            = 48
 *   jarak judul -> garis     =  7
 *   meta: 1 + 7 + 19 + 7 + 1 = 35
 *   jarak garis -> ringkasan =  7
 *   ringkasan 2 x 21,5       = 43
 *                             ---
 *                             140
 * Keempat jarak di sekitar meta sengaja sama, 7px, supaya tidak jomplang:
 * 7 di atas garis atas, 7 ke meta, 7 dari meta, 7 di bawah garis bawah.
 */
/* DUA TULISAN SEBARIS, bagi rata 50:50. Lebar penuh 1170px dengan jarak
   antarkolom 30px berarti tiap tulisan mendapat 570px: gambar 229px + jarak
   18px + teks 323px.
   Anggaran tinggi teks kini: judul 42 + 7 + meta 35 + 7 + cuplikan 40
   + 9 + tombol "Baca selengkapnya" 26 = 166px (judul & cuplikan sudah
   diperkecil sejak perhitungan 140px di atas ditulis), jadi gambar
   ikut dibesarkan 200x140 -> 236x166 -- nisbahnya tetap ~1,42.
   Lalu (permintaan Bapak) gambar dibuat sejajar dengan TINTA teks, bukan
   kotaknya: atasnya segaris puncak huruf kapital judul, yang diukur 5,05px
   di bawah tepi atas blok teks (?garis=1 / pindai canvas), bawahnya segaris
   dasar tombol (166px). Jadi gambar turun 5px, tinggi 161px, lebar ikut
   sebanding 236 x 161/166 = 229px. */
.daftar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
.daftar .baris {
    display: grid; grid-template-columns: 229px 1fr; gap: 18px;
    align-items: start; padding: 18px 0; border-bottom: 1px solid var(--j-garis);
}
/* Dua butir teratas sama-sama berada di baris pertama, jadi keduanya yang
   ruang atasnya dinolkan -- bukan cuma butir pertama seperti dulu. */
.daftar .baris:nth-child(-n+2) { padding-top: 0; }
.daftar .gambar {
    width: 229px; height: 161px; flex: 0 0 229px; margin-top: 5px;
    background: #e9eeec; overflow: hidden;
    display: flex; align-items: center; justify-content: center; color: #b9c6c2; font-size: 20px;
}
.daftar .gambar img { width: 229px; height: 161px; object-fit: cover; }
.daftar .teks { height: 166px; overflow: hidden; display: flex; flex-direction: column; }
/* Tombol didorong ke dasar blok teks -- selalu segaris dgn dasar gambar,
   termasuk bila judulnya cuma satu baris. */
.daftar .teks .lanjut { margin-top: auto; align-self: flex-start; }
.daftar .teks .cuplikan { margin-bottom: 9px; }
.daftar h3 {
    /* 16 -> 14,5px, baris 24 -> 21px (dipakai Berita Terbaru & arsip). */
    font-size: 14.5px; font-weight: 600; line-height: 21px; margin: 0 0 7px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; max-height: 42px;
}
/* Meta berita dijepit dua garis kuning tipis, TANPA bidang latar -- sama
   pilihannya dengan meta kartu pengumuman. Garisnya 1px, bukan 2px seperti di
   kartu, karena tinggi blok teks berita dipatok 140px dan anggarannya sudah
   pas. Ruang dalam kiri-kanan nol supaya teks meta tetap sebaris dengan judul
   dan ringkasan di atas-bawahnya. */
.daftar .meta {
    /* Huruf meta berita diperkecil 12px -> 10px, ikonnya 11px -> 9px.
       TINGGI BARISNYA DIPATOK 19,2px, yaitu tinggi yang berlaku sebelumnya,
       supaya pengecilan ini tidak menggeser apa pun: blok meta tetap 35px dan
       anggaran tinggi blok teks tetap pas 140px. */
    font-size: 10px; line-height: 19.2px;
    padding: 7px 0;
    border-top: 1px solid rgba(255, 193, 7, .35);
    border-bottom: 1px solid rgba(255, 193, 7, .35);
}
.daftar .meta i { color: #b98900; font-size: 9px; }
/* Yang membuat meta terasa BERSERAKAN bukan cuma ukuran hurufnya, tetapi
   ruang di dalamnya: ikon berjarak 5px dari teksnya dan titik pemisah 9px
   kiri-kanan. Keduanya dirapatkan -- 3px dan 4px -- sehingga tiap butir
   mengumpul jadi satu kesatuan, bukan potongan yang bertebaran. */
.daftar .meta > span { gap: 3px; }
.daftar .meta > span + span::before { color: rgba(185, 137, 0, .45); margin: 0 4px; }
.daftar h3 a { color: var(--j-teks); }
.daftar h3 a:hover { color: var(--j-hijau); }
.daftar p {
    /* Cuplikan 14 -> 13px (ikut judul yang diperkecil). */
    margin: 7px 0 0; color: #555; font-size: 13px; line-height: 20px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; max-height: 40px;
}

/* Cuplikan + "Baca selengkapnya" (_cuplikan.php) -- kartu Pengumuman,
   daftar Berita, dan arsip. Cuplikan dua baris penuh, tombol kecil bersudut
   bulat DI BAWAHNYA, rata kiri -- segaris dgn teks (di kanan ia membuat
   ruang di atasnya tampak kosong, kata Bapak): tinggi 26px (huruf 11,5px, baris 16px, ruang 4px,
   garis 1px), berjarak 9px dari cuplikan. */
.lanjut {
    display: inline-block; margin-top: 9px; padding: 4px 11px;
    font-size: 11.5px; font-weight: 600; line-height: 16px;
    color: var(--j-hijau); border: 1px solid var(--j-hijau); border-radius: 4px;
    transition: background .15s, color .15s;
}
.lanjut:hover { color: #fff; background: var(--j-hijau); }
.lanjut i { font-size: 10px; margin-left: 3px; }
/* Kartu pengumuman: judul TIDAK lagi dipatok tiga baris (permintaan Bapak:
   jarak judul -> cuplikan terlalu jomplang, sisa baris kosong 21px). Judul
   setinggi isinya (maks. 3 baris), cuplikan langsung menyusul; kartu jadi
   kolom lentur dan tombol didorong ke dasarnya, sehingga tombol keempat
   kartu tetap sejajar walau judulnya beda panjang. */
.kisi .pos { display: flex; flex-direction: column; }
.kisi .pos h3 { height: auto; max-height: 63px; }
.kisi .pos p.cuplikan { margin-bottom: 9px; }
.kisi .pos > .lanjut { margin-top: auto; align-self: flex-start; }
/* Cuplikan tetap DIPATOK dua baris (40px). */
.pos p.cuplikan {
    margin: 8px 0 0; color: #555; font-size: 13px; line-height: 20px; height: 40px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ===================== meta pos ===================== */
/* Satu bentuk meta dipakai kisi maupun daftar: penulis, tanggal, kategori,
   dan jumlah dibaca. Dipisah titik tengah, kategori berupa label hijau. */
.meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0;
    font-size: 12px; color: var(--j-redup); line-height: 1.6;
}
/* Meta pada kartu kisi dan daftar tidak bergaris; hanya meta laman pos penuh
   yang dijepit garis rambut (lihat pos.css). */
.meta > span { display: inline-flex; align-items: center; gap: 5px; }
.meta > span + span::before {
    content: "•"; margin: 0 9px; color: #c9cfcd; font-size: 11px;
}
.meta i { font-size: 11px; color: #9aa5a2; }
/* Di kartu kisi yang sempit, meta terlipat ke beberapa baris. Titik pemisah
   dibuang di sana supaya tidak ada titik menggantung di awal baris. */
.kisi .meta { gap: 5px 14px; }
.kisi .meta > span + span::before { content: none; margin: 0; }

/* Meta kartu pengumuman: SATU BARIS, tepat DI BAWAH GAMBAR dan DI ATAS JUDUL.
 *
 * Kiri penulis dan tanggal, kanan jumlah dibaca, lalu garis tipis, baru judul.
 * Kategori tidak lagi ditampilkan: rubriknya sudah tertera pada label hijau di
 * atas gambar dan pada judul bagian di atas kisi.
 *
 * SELEKTORNYA DIAWALI .pos. Tanpa itu aturan di sini kalah oleh
 * `.pos .meta { font-size: 12px; ... }` dan `.pos .meta span { display:
 * inline-flex; gap: 5px }` di bagian kisi pos, yang kekhususannya lebih tinggi.
 *
 * Ukurannya sama persis dengan meta berita: huruf 10px, ikon 9px, ikon
 * berjarak 3px dari teksnya, titik pemisah 4px kiri-kanan. */
.pos .meta-kartu {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 10px; line-height: 19.2px;
    /* Jarak dibuat rata 10px di ketiga sisi: gambar -> meta, meta -> garis,
       garis -> judul. Yang memisahkan meta dari judul adalah GARISNYA,
       bukan ruang yang lebih lebar, jadi ruangnya tidak perlu jomplang. */
    margin-top: 10px; padding: 0 0 10px;
    border-bottom: 1px solid rgba(255, 193, 7, .35);
}
.pos .meta-kartu i { color: #b98900; font-size: 9px; }
.pos .meta-kartu .kiri, .pos .meta-kartu .kanan { display: inline-flex; align-items: center; }
.pos .meta-kartu .kiri > span,
.pos .meta-kartu .kanan > span { display: inline-flex; align-items: center; gap: 3px; }
.pos .meta-kartu .kiri > span + span::before {
    content: "•"; margin: 0 4px; color: rgba(185, 137, 0, .45); font-size: 10px;
}

.meta .penulis { color: var(--j-teks); font-weight: 600; }
.meta .kategori {
    color: var(--j-hijau); font-weight: 600;
}
.meta .kategori i { color: var(--j-hijau); }
/* Label kategori = satu tautan (ikon + nama, _meta_kategori.php); jarak
   ikon-teks mengikuti butir meta tempatnya berada. */
.meta .kategori a { display: inline-flex; align-items: center; gap: inherit; color: inherit; }
.meta .kategori a:hover { color: var(--j-hijau-tua); text-decoration: underline; }
.meta .dilihat { color: var(--j-redup); }

/* ===================== bilah samping ===================== */
/* Bilah samping TANPA kartu: tidak ada kotak, garis tepi, maupun latar putih.
   Judul tiap blok memakai resep yang sama dengan judul bagian di kolom utama. */
.samping .widget { background: transparent; border: 0; margin-bottom: 34px; }
.samping .widget .kepala {
    position: relative;
    border-bottom: 1.6px solid rgba(0, 0, 0, .1);
    padding: 0 0 15px; margin: 0 0 18px;
}
.samping .widget .kepala::after {
    content: ""; position: absolute; left: 0; bottom: -2px;
    width: 40px; height: 2px; background: var(--j-hijau);
}
.samping .widget .kepala::before {
    content: ""; position: absolute; left: 0; bottom: -5px;
    width: 0; height: 0;
    border-style: solid; border-width: 4.8px 4.8px 0 0;
    border-color: var(--j-hijau) transparent transparent transparent;
}
.samping .widget .kepala h4 {
    font-size: 15px; font-weight: 600; color: var(--j-teks); line-height: 30px;
    display: flex; align-items: center; gap: 8px;
}
.samping .widget .kepala h4 i { color: var(--j-hijau); font-size: 13px; }
.samping .widget .isi { padding: 0; }

.angka-widget { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--j-garis); }
.angka-widget > div { background: var(--j-bg); padding: 16px 12px; text-align: center; }
.angka-widget .nilai { display: block; font-size: 24px; font-weight: 600; color: var(--j-hijau); line-height: 1.2; }
.angka-widget .label { display: block; font-size: 11.5px; color: var(--j-redup); margin-top: 3px; }

.tautan-cepat { list-style: none; margin: 0; padding: 0; }
.tautan-cepat li + li { border-top: 1px solid var(--j-garis); }
.tautan-cepat a { display: flex; align-items: center; gap: 10px; padding: 11px 0; color: var(--j-teks); font-weight: 500; }
.tautan-cepat a:hover { color: var(--j-hijau); }
.tautan-cepat i { color: var(--j-hijau); width: 16px; text-align: center; }

/* --- blok Pos Terbaru --- */
/* Susunannya meniru blok Agenda: gambar di kiri, teks di kanan, dipisah kisi
   dua lajur. Gambarnya DIPATOK 92x64 px -- sedikit lebih besar daripada 80x56
   sebelumnya -- dan blok teks di kanannya dikunci pada tinggi yang sama:
   judul dua baris (2 x 22 = 44) ditambah tanggal (20) tepat 64 px.
   Judul digeser naik 4px. Tinggi baris 22px pada huruf 13px menyisakan ruang
   kosong bawaan di atas huruf pertama; tanpa penggeseran itu, tepi atas gambar
   terlihat lebih tinggi daripada awal tulisan judulnya. Sisa 4px di bawah
   terserap oleh ruang bawaan yang sama di bawah baris tanggal. */
.samping .pos-ringkas { margin: 0; padding: 0; list-style: none; }
.samping .pos-ringkas li { border-bottom: 1px solid var(--j-garis); }
.samping .pos-ringkas li:last-child { border-bottom: 0; }
.samping .pos-ringkas a { display: grid; grid-template-columns: 92px 1fr; gap: 13px; padding: 14px 0; }
.samping .pos-ringkas li:first-child a { padding-top: 0; }
.samping .pos-ringkas li:last-child a { padding-bottom: 0; }
.samping .pos-ringkas .gbr {
    width: 92px; height: 64px; overflow: hidden; background: #e9eeec;
    display: flex; align-items: center; justify-content: center; color: #b9c6c2; font-size: 16px;
}
.samping .pos-ringkas .gbr img { width: 92px; height: 64px; object-fit: cover; }
.samping .pos-ringkas .tks { height: 64px; overflow: hidden; }
.samping .pos-ringkas .jdl {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 13px; font-weight: 600; line-height: 22px; height: 44px;
    margin-top: -4px; color: var(--j-teks);
}
.samping .pos-ringkas a:hover .jdl { color: var(--j-hijau); }
.samping .pos-ringkas .tgl { display: block; font-size: 11px; line-height: 20px; color: var(--j-redup); }

/* --- blok Tautan Eksternal --- */
.samping .tautan-luar { margin: 0; padding: 0; list-style: none; }
.samping .tautan-luar li { border-bottom: 1px solid var(--j-garis); }
.samping .tautan-luar li:last-child { border-bottom: 0; }
.samping .tautan-luar a {
    display: flex; align-items: center; padding: 11px 0;
    font-size: 12.5px; font-weight: 600; color: var(--j-teks);
}
/* Ikon "buka di laman baru" didorong ke tepi kanan. Nama tautan di kiri,
   ikon di kanan, ruang kosong di antaranya justru yang membuat barisnya
   terisi penuh -- teks nama memang pendek-pendek, jadi kalau ikonnya menempel
   pada teks, separuh baris di kanan akan terlihat menganggur. */
.samping .tautan-luar .panah { margin-left: auto; padding-left: 12px; color: #b6c1bd; font-size: 11px; }
.samping .tautan-luar a:hover { color: var(--j-hijau); }
.samping .tautan-luar a:hover .panah { color: var(--j-hijau); }

.agenda li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--j-garis); list-style: none; }
.agenda { margin: 0; padding: 0; }
.agenda li:last-child { border-bottom: 0; padding-bottom: 0; }
.agenda .tgl {
    background: var(--j-hijau); color: #fff; border-radius: 0; text-align: center;
    padding: 6px 0; line-height: 1.15;
}
.agenda .tgl b { display: block; font-size: 18px; font-weight: 600; }
.agenda .tgl span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.agenda .judul { font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.agenda .waktu { font-size: 12px; color: var(--j-redup); }

/* ===================== kaki ===================== */
.kaki { background: var(--j-kaki); color: rgba(255, 255, 255, .72); margin-top: 10px; }
/* Kaki dibagi dua sama besar: kiri keterangan prodi, kanan peta.
   Lajur "Tautan" dan "Layanan" dibuang atas permintaan Bapak, jadi bagian kiri
   tinggal satu blok. */
.kaki .kaki-isi {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
    padding: 40px 0 30px; align-items: stretch;
    /* Isi kaki 14 -> 13px (permintaan Bapak: "perkecil juga huruf konten
       program studi di footer"); judul h4 tetap 15px/25px di bawah. */
    font-size: 13px;
}
/* TINGGI BARIS DIPATOK 25px. Kedua judul di kaki -- "Program Studi ..." dan
   "Lokasi" -- harus memakai tinggi yang sama persis, karena tepi atas paragraf
   di kiri dan tepi atas kotak peta di kanan ditentukan olehnya. Dengan angka
   tetap, keduanya tidak akan bergeser meski ukuran huruf kelak diubah.
   Keduanya sama-sama satu baris pada lebar dua lajur (>= 992px); di bawah itu
   kaki memang menumpuk satu lajur sehingga perataan ini tidak berlaku lagi. */
.kaki h4 {
    color: #fff; font-size: 15px; font-weight: 600;
    line-height: 25px; margin-bottom: 14px;
}
.kaki p { margin: 0 0 10px; line-height: 1.75; }
/* Logo UIN Mataram di blok program studi. TANPA alas apa pun.
   Alas putih yang sempat saya pasang ternyata keliru: berkas PNG-nya sudah
   membawa badan putihnya sendiri -- bagian dalam bintang memang putih pekat,
   dan hanya sudut di luar bintang yang tembus pandang. Jadi tulisan gelap di
   dalamnya tetap terbaca di atas latar kaki, dan alas tambahan cuma membuat
   kotak putih mengelilingi bintangnya. */
.kaki .lembaga { display: grid; grid-template-columns: 80px 1fr; gap: 16px; align-items: start; }
.kaki .lembaga img { width: 80px; height: 80px; }
.kaki .lembaga p:last-child { margin-bottom: 0; }
.kaki ul { list-style: none; margin: 0; padding: 0; }
.kaki li { padding: 5px 0; }
/* Keterangan hubungi -- alamat, jam kerja, surel, dan laman -- DIBARISKAN,
   bukan ditumpuk seperti daftar. Butirnya mengalir menyamping dan baru turun
   kalau tidak muat. Jarak antarbutir 22px, jauh lebih lebar daripada jarak
   ikon ke teksnya sendiri (7px), supaya jelas mana yang satu kesatuan. */
.kaki .hubungi {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 7px 22px; margin-top: 10px;
}
.kaki .hubungi li { display: inline-flex; align-items: center; gap: 7px; padding: 0; }
/* Alamat dan jam kerja memakai barisnya sendiri-sendiri, supaya surel dan
   alamat laman -- yang sama-sama pendek -- selalu jatuh bersebelahan di baris
   terakhir. Tanpa ini, urutannya mengalir begitu saja dan alamat laman sempat
   tertinggal sendirian di baris ketiga. */
.kaki .hubungi li.baris-penuh { flex-basis: 100%; }
.kaki .hubungi i { font-size: 12px; color: rgba(255, 255, 255, .5); }
.kaki .hubungi span { line-height: 1.65; }
.kaki a { color: rgba(255, 255, 255, .72); }
.kaki a:hover { color: #fff; }
/* Peta MEMANJANG mengikuti tinggi lajur kiri: petanya yang mengisi sisa ruang,
   sehingga tepi bawah kedua bagian selalu sebaris berapa pun panjang teks di
   kiri. Sudutnya tetap persegi seperti unsur lain. */
.kaki .peta { display: flex; flex-direction: column; }
.kaki .peta iframe {
    /* Setelah lajur Tautan dan Layanan dibuang, bagian kiri jadi pendek.
       Batas bawah 240px menjaga peta tetap lapang, dan karena kedua bagian
       sama tinggi, bagian kiri ikut memanjang mengikutinya. */
    width: 100%; flex: 1 1 auto; min-height: 240px; display: block;
    border: 1px solid rgba(255, 255, 255, .12);
}
.kaki .peta .arah {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 12px; font-size: 12.5px; font-weight: 600;
}
.kaki .peta .arah:hover { color: #fff; }

.kaki-bawah { border-top: 1px solid rgba(255, 255, 255, .08); font-size: 12.5px; }
.kaki-bawah .wadah { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding: 16px 15px; }

/* Tombol menu (ikon garis tiga) hanya muncul di tablet tegak dan ponsel.
   Di layar lebar ia disembunyikan dan butir menu tampil sebaris seperti biasa. */
.tombol-menu { display: none; }

/* ===================== layar sempit ===================== */
/* TIGA LEBAR ACUAN, diukur di peramban:
 *   >= 992px  desktop & tablet mendatar -- susunan penuh, tidak diubah.
 *   641-991   tablet tegak  -- menu dilipat ke tombol, kisi dua lajur.
 *   <= 640    ponsel        -- semua satu lajur, bilah atas diringkas.
 *
 * Menu dilipat mulai 991px karena keenam butirnya saja sudah 819px; ditambah
 * kotak cari 242px, pada layar 768px laman sempat bisa digeser mendatar sampai
 * 892px. Pada 992-1199px semuanya masih muat -- kotak cari menyusut sendiri. */
@media (max-width: 991px) {
    .daftar { grid-template-columns: 1fr; }
    .sekilas { grid-template-columns: 1fr 1fr; }
    .badan.bersamping { grid-template-columns: 1fr; }
    .kisi, .bagian-penuh .kisi { grid-template-columns: 1fr 1fr; }
    .kaki .kaki-isi { grid-template-columns: 1fr; }

    /* Donat dibatasi 220px. Tanpa batas ini ia ikut 88% lebar kolom dan
       membengkak sampai 305px di tablet, 303px di ponsel -- jauh lebih besar
       daripada isi blok lain. */
    .donat svg { max-width: 220px; }

    /* --- menu dilipat --- */
    /* Bilah tetap 60px: tombol menu di kiri, kotak cari di kanan. Butir menu
       disembunyikan, lalu tampil sebagai panel tegak tepat di bawah bilah
       ketika tombolnya ditekan. */
    .menu-utama .bilah { position: relative; }
    .tombol-menu {
        display: flex; align-items: center; gap: 9px; height: 60px;
        padding: 0 18px; border: 0; background: transparent; cursor: pointer;
        color: #fff; font: inherit; font-size: 14px; font-weight: 700;
    }
    .tombol-menu i { font-size: 17px; width: 17px; text-align: center; }
    .tombol-menu:hover,
    .menu-utama.buka .tombol-menu { background: var(--j-navbar-2); }

    .menu-utama ul {
        display: none;
        position: absolute; top: 60px; left: 0; right: 0; z-index: 910;
        flex-direction: column; height: auto;
        background: var(--j-navbar); box-shadow: 0 8px 16px rgba(0, 0, 0, .28);
    }
    .menu-utama.buka ul { display: flex; }
    .menu-utama li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
    .menu-utama li > a { flex: 1 1 auto; height: 48px; padding: 0 18px; }
    /* Ikon Font Awesome berbeda-beda lebarnya, sehingga di panel tegak awal
       tulisannya sempat berselisih sampai 6px. Ikon pertama dipatok 18px. */
    .menu-utama li > a > i:first-child { width: 18px; text-align: center; }
    /* Panah turun menandai submenu; di panel tegak ia didorong ke tepi kanan. */
    .menu-utama li > a i.fa-angle-down { margin-left: auto; }
    /* Lidah penanda aktif yang menonjol ke bawah hanya cocok untuk menu
       mendatar. Di panel tegak cukup latar gelapnya. */
    .menu-utama li.aktif > a::after { content: none; }
    /* Menu hasil impor bisa panjang -- panel digulir sendiri, tidak
       melampaui tinggi layar. */
    .menu-utama #daftar-menu { max-height: calc(100vh - 60px); overflow-y: auto; }
    /* Submenu di panel tegak: selalu terbuka, menjorok di bawah induknya. */
    .menu-utama li.beranak { flex-direction: column; }
    .menu-utama li.beranak > a { flex: 0 0 auto; }
    .menu-utama ul.submenu {
        display: flex; position: static; min-width: 0; box-shadow: none;
        background: rgba(0, 0, 0, .18);
    }
    .menu-utama ul.submenu li > a { padding: 10px 18px 10px 45px; }
}
@media (max-width: 640px) {
    /* Jarak ke tepi layar dilebarkan dari 15px ke 20px KHUSUS di ponsel.
       .wadah dipakai di SEMUA laman (beranda dan pos), jadi keduanya ikut
       berubah bersamaan -- tidak akan berbeda satu sama lain. Tablet ke atas
       (>640px) tidak tersentuh, tetap 15px seperti semula. */
    .wadah { padding: 0 20px; }
    .kisi, .bagian-penuh .kisi { grid-template-columns: 1fr; }
    /* Sekilas TETAP DUA LAJUR seperti di tablet, atas permintaan Bapak:
       ditumpuk satu-satu, keempat bloknya memakan gulir terlalu panjang.
       Jarak antarlajur dirapatkan 30 -> 16px supaya tiap blok mendapat
       lebar lebih. */
    .sekilas { gap: 24px 16px; }
    /* Agenda dirapatkan. Di lajur 165px, kotak tanggal 52px + jarak 12px
       menyisakan teks cuma 100px, sehingga tiap butir melar sampai 140px dan
       blok Mahasiswa & Alumni di sebelahnya ikut memanjang kosong. */
    .agenda li { grid-template-columns: 40px 1fr; gap: 9px; padding: 10px 0; }
    .agenda .tgl { padding: 5px 0; }
    .agenda .tgl b { font-size: 15px; }
    .agenda .tgl span { font-size: 9.5px; }
    .agenda .judul { font-size: 12px; line-height: 1.4; }
    .agenda .waktu { font-size: 10.5px; line-height: 1.4; }
    /* Di layar lebar donat dipatok ke atas supaya sebaris dengan kotak Unggul.
       Di ponsel ia bersebelahan dengan Agenda yang lebih tinggi, jadi sisa
       ruangnya dibagi rata atas-bawah, tidak menumpuk di antara donat dan
       keterangannya. */
    .donat { align-items: center; }

    /* --- bilah atas diringkas --- */
    /* Tanggal (205px) + periode (209px) + ikon dan tombol Masuk (144px) tidak
       muat di layar 375px: tombol Masuk sempat terdorong ke x=605, di luar
       layar. Yang dipertahankan periode berjalan dan tombol Masuk. Tanggal
       disembunyikan, begitu pula ikon laman dan surel -- keduanya sudah ada
       di kaki. */
    .bilah-atas .tanggal,
    .bilah-atas .kanan a:not(.tombol-masuk) { display: none; }
    .bilah-atas .periode { padding-left: 0; border-left: 0; }
    /* Bilah atas tak boleh melebar melebihi layar: periode MENYUSUT dengan
       elipsis (dulu ia mendorong saklar bahasa & tombol Masuk keluar layar
       sehingga laman bisa digulir ke samping -- dilaporkan Bapak). */
    .bilah-atas .wadah { gap: 10px; }
    .bilah-atas .periode { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bilah-atas .kanan { flex: 0 0 auto; gap: 10px; }

    /* --- kop --- */
    /* Logo dulu dipatok tinggi 88px sambil dibatasi lebarnya, sehingga di
       ponsel ia GEPENG (345x88, padahal nisbah aslinya 423x88). Kini lebarnya
       yang mengikuti layar dan tingginya menyesuaikan, nisbah tetap utuh. */
    .kop .wadah { justify-content: center; padding-top: 16px; padding-bottom: 16px; }
    .kop img { width: 100%; max-width: 423px; height: auto; }

    /* --- menu --- */
    /* Kotak cari tetap ada, mengisi sisa lebar bilah di kanan tombol menu. */
    .menu-utama .cari { flex: 1 1 auto; width: auto; min-width: 0; margin-left: 12px; }
    .menu-utama .cari:focus-within { width: auto; }

    .daftar .baris { grid-template-columns: 120px 1fr; gap: 14px; }
    .daftar .gambar { width: 120px; height: 90px; flex-basis: 120px; margin-top: 0; }
    .daftar .gambar img { width: 120px; height: 90px; }
    .daftar .teks { height: 90px; }
    .daftar h3 { font-size: 13.5px; line-height: 20px; max-height: 40px; }
    .daftar p, .daftar .lanjut { display: none; }
    /* Meta berita harus SATU BARIS supaya muat di blok teks 90px (judul 42 +
       jarak 7 + meta 35 = 84). Dengan keempat butirnya, meta terlipat jadi
       54px dan ikut terpotong. Kategori dibuang karena semuanya "Berita" --
       sudah tertulis di judul bagian -- dan jumlah dibaca masih kosong. */
    .daftar .meta .kategori,
    .daftar .meta .dilihat { display: none; }

    .kaki-bawah .wadah { justify-content: center; text-align: center; }
}

/* ===================== keselarasan ikon meta ===================== */
/* Ikon Font Awesome di baris meta jatuh sedikit LEBIH RENDAH daripada
   tengah tinggi huruf kapital teksnya (keluhan Bapak). Diukur dgn
   contoh-situs/garis-meta.js (buka laman dgn ?garis=1): garis dasar dibaca
   dari tata letak, bentuk tinta glif dari gambar canvas 200px -- BUKAN
   measureText().actualBoundingBox* yang dibulatkan Chrome ke piksel bulat
   (ukuran pertama yang memakainya keliru). Angka mentah: kartu Pengumuman,
   Berita Terbaru, arsip = 0,22px lebih rendah, semua jenis ikon sama. */
.meta i.fas { transform: translateY(-0.22px); }
/* Skala layar Windows 125% (dppx 1,25 -- laptop Bapak): peramban
   membulatkan posisi ikon & huruf ke piksel layar, sehingga -0,22px di atas
   tetap membuat ikon jatuh 1 piksel layar lebih rendah (terlihat di
   pembesaran piksel; bila halaman di-zoom, sejajar). Pergeseran hanya
   berlaku per lompatan piksel layar; -0,6px membuatnya sejajar pada 125%.
   Di 100% nilai ini justru terlalu naik, jadi hanya untuk rentang ini. */
@media (min-resolution: 1.2dppx) and (max-resolution: 1.3dppx) {
    .meta i.fas { transform: translateY(-0.6px); }
}

/* ===================== mode gelap =====================
   Aktif lewat html[data-mode="gelap"], dipasang skrip di <head> (_kerangka.php)
   SEBELUM laman tergambar -- tanpa kedipan putih. Kuncinya sama dengan Office
   ('office-mode' di localStorage), jadi pilihan di Office & situs saling ikut;
   bawaan mengikuti setelan perangkat. Sebagian besar warna berbalik lewat
   variabel --j-*; sisanya warna yang tertulis langsung, ditimpa di sini. */
html[data-mode="gelap"] {
    color-scheme: dark;
    --j-hijau:      #1e9c8f;   /* lebih terang: tetap terbaca di latar gelap,
                                  dan teks putih di atasnya masih kontras */
    --j-hijau-tua:  #177f75;
    --j-teks:       #e2e7e6;
    --j-redup:      #a0aaa8;
    --j-garis:      #394240;   /* garis rambut: cukup terang agar tampak */
    --j-bg:         #141718;
    --j-permukaan:  #1c2021;
    --j-kaki:       #0e1011;
}
html[data-mode="gelap"] .bilah-atas,
html[data-mode="gelap"] .kop { background: var(--j-permukaan); }
html[data-mode="gelap"] .kop { box-shadow: 0 5px 12px rgba(0, 0, 0, .55); }
/* Logo berteks hijau tua: diberi pendar tipis supaya tetap terbaca. */
html[data-mode="gelap"] .kop img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .55)); }
html[data-mode="gelap"] .bar-daftar .alur { background: #2a3130; }
html[data-mode="gelap"] .pos .gambar,
html[data-mode="gelap"] .daftar .gambar,
html[data-mode="gelap"] .samping .pos-ringkas .gbr { background: #252b2c; color: #48524f; }
html[data-mode="gelap"] .pos p,
html[data-mode="gelap"] .daftar p { color: #b9c2c0; }
html[data-mode="gelap"] .meta > span + span::before { color: #4c5553; }
html[data-mode="gelap"] .meta i { color: #7f8a88; }
html[data-mode="gelap"] .meta .kategori i { color: var(--j-hijau); }
html[data-mode="gelap"] .samping .tautan-luar .panah { color: #5c6664; }
/* Garis bawah judul bagian, judul blok Sekilas, dan kepala widget bilah
   samping memakai hitam transparan -> lenyap di latar gelap (laporan Bapak:
   "beberapa garis belum muncul"). Dibalik jadi putih transparan. */
html[data-mode="gelap"] .judul-bagian,
html[data-mode="gelap"] .sekilas .blok h4,
html[data-mode="gelap"] .samping .widget .kepala { border-bottom-color: rgba(255, 255, 255, .16); }
/* Peta Google tak bisa diwarnai dari luar: dibalik warnanya (invert +
   hue-rotate 180deg -> daratan gelap, air & jalan tetap berwarna wajar). */
html[data-mode="gelap"] .kaki .peta iframe { filter: invert(.9) hue-rotate(180deg) brightness(.95); }

/* Saklar mode di bilah atas (ikon bulan = beralih ke gelap, matahari = ke terang). */
.saklar-mode {
    border: 0; background: transparent; color: var(--j-redup); cursor: pointer;
    padding: 0; font-size: 13px; line-height: 1; display: inline-flex; align-items: center;
}
.saklar-mode:hover { color: var(--j-hijau); }

/* ===================== warna tema =====================
   Tiga pilihan (tab Halaman Depan -> Warna Situs), dipasang sebagai
   <html data-warna="..."> oleh _kerangka.php. Hijau = :root di atas.
   Tiap warna punya padanan mode gelap yang lebih terang supaya tetap
   terbaca -- aturan [data-warna][data-mode] di bawah lebih khusus dari
   blok mode gelap, jadi menang. Aksen kuning tetap sama. */
html[data-warna="merah"] {                 /* merah muda (rose) */
    --j-hijau:      #c2185b;
    --j-hijau-tua:  #9c1449;
    --j-navbar:     #7a1038;
    --j-navbar-2:   #520a25;
}
html[data-warna="merah"][data-mode="gelap"] {
    --j-hijau:      #e0588a;
    --j-hijau-tua:  #c63f70;
    --j-navbar:     #5c0d2b;
    --j-navbar-2:   #3d081c;
}
html[data-warna="biru"] {                  /* biru baja, tenang di mata */
    --j-hijau:      #2a6f97;
    --j-hijau-tua:  #1f5676;
    --j-navbar:     #1b3a57;
    --j-navbar-2:   #11263a;
}
html[data-warna="biru"][data-mode="gelap"] {
    --j-hijau:      #4f9bc8;
    --j-hijau-tua:  #3a82ad;
    --j-navbar:     #16304a;
    --j-navbar-2:   #0d1e2f;
}

/* ===================== alih bahasa Google =====================
   Pemilih bahasa Google Translate di bilah atas. Bilah tawaran Google di
   puncak jendela diredam supaya tata letak situs tidak terdorong turun --
   pencantuman "Terjemahan oleh Google Translate" tetap tampil di kaki
   (isian Kaki Laman), sesuai syarat Google. */
/* Pemilih bawaan widget: disembunyikan -- ia cuma "mesin"; yang dilihat
   pengunjung adalah saklar ID/EN di bawah. Tidak memakai display:none
   supaya widget tetap hidup. */
#alih-bahasa-google {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Saklar geser ID/EN */
.saklar-bahasa {
    position: relative; display: inline-flex; align-items: center; gap: 0; padding: 0;
    height: 22px; border: 0; border-radius: 999px; background: rgba(128, 128, 128, .18);
    /* fonta dipaksa ikut situs: widget Google memasang fontanya sendiri pada
       apa pun yang disentuhnya */
    font-family: inherit !important; font-size: 10.5px; font-weight: 700; line-height: 22px;
    cursor: pointer; user-select: none;
}
.saklar-bahasa .sisi, .saklar-bahasa .bulat { font-family: inherit !important; }
.saklar-bahasa .sisi { width: 30px; text-align: center; color: var(--j-redup); }
.saklar-bahasa .bulat {
    position: absolute; top: 0; left: 0; width: 50%; height: 100%; border-radius: 999px;
    background: var(--j-hijau); color: #fff; text-align: center;
    transition: transform .18s ease, background .18s ease;
}
.saklar-bahasa.bahasa-kanan .bulat { transform: translateX(100%); }
.saklar-bahasa:hover .bulat { background: var(--j-hijau-tua); }
/* Yang disisakan HANYA kotak pilihnya: tulisan "Terjemahan" & tautan logo
   bawaan widget disembunyikan (pencantuman Google ada di kaki situs). */
#alih-bahasa-google .goog-te-gadget { font-size: 0 !important; color: transparent !important; line-height: 1; }
#alih-bahasa-google .goog-te-gadget > span,
#alih-bahasa-google .goog-logo-link { display: none !important; }
#alih-bahasa-google .goog-te-gadget-simple {
    background: transparent; border: 0; padding: 0; font-size: 12px; line-height: 1;
    color: var(--j-redup); white-space: nowrap;
}
#alih-bahasa-google .goog-te-gadget-simple span { color: var(--j-redup); border: 0; }
#alih-bahasa-google .goog-te-gadget-simple:hover span { color: var(--j-hijau); }
#alih-bahasa-google img { display: none; }          /* ikon Google di dalam pemilih */
#alih-bahasa-google select.goog-te-combo {
    background: transparent; border: 1px solid rgba(128, 128, 128, .35); border-radius: 999px;
    color: var(--j-redup); font: inherit; font-size: 11.5px; font-weight: 600;
    padding: 2px 6px; height: 22px; line-height: 1; cursor: pointer; outline: none;
}
#alih-bahasa-google select.goog-te-combo:hover { color: var(--j-hijau); border-color: var(--j-hijau); }
/* HANYA bilah tawaran Google yang disembunyikan -- jangan seluruh bingkai
   .skiptranslate: sebagian di antaranya adalah bingkai KERJA yang dipakai
   Google untuk menerjemahkan, dan menyembunyikannya membuat terjemahan tak
   pernah jalan. */
/* Bilah tawaran Google (lama & baru) disembunyikan -- BUKAN seluruh bingkai
   .skiptranslate: sebagian adalah bingkai kerja, dan mematikannya membuat
   terjemahan tak pernah jalan. */
.goog-te-banner-frame,
iframe.VIpgJd-ZVi9od-ORHb-OEVmcd { display: none !important; visibility: hidden !important; }
/*
 * Widget menggeser laman untuk memberi tempat bilahnya -- di ponsel
 * pergeseran itu paling terasa (laman turun & ikut "meloncat" saat digulir,
 * dilaporkan Bapak). Semua bentuk pergeserannya dinolkan.
 */
html, body { top: 0 !important; margin-top: 0 !important; position: static !important; min-height: 0; }
body { overflow-x: hidden; }
body { top: 0 !important; }                          /* bilah Google mendorong <body> */
.baris-terjemahan { margin-left: 10px; opacity: .8; }

/* Ikon menempel ke teks saat laman diterjemahkan (dilaporkan Bapak).
   Sebabnya BUKAN CSS diabaikan: Google membungkus tiap teks dengan <font>
   miliknya dan spasi pemisah ikon-teks ikut hilang. Jarak itu dikembalikan
   di sini -- aturan ini HANYA berlaku saat laman sudah diterjemahkan,
   karena <font> baru ada setelah itu. */
i.fas + font, i.far + font, i.fab + font { margin-left: 5px; }
font + i.fas, font + i.far, font + i.fab { margin-left: 5px; }
/* Yang jaraknya memang sudah diatur flex gap tak perlu ditambah lagi. */
.meta > span i.fas + font,
.pos .meta-kartu i.fas + font,
.daftar .meta i.fas + font,
.kaki .hubungi li i.fas + font,
.judul-bagian h2 i.fas + font,
.sekilas .blok h4 i.fas + font,
.samping .widget h4 i.fas + font,
.bilah-atas .tanggal i.fas + font,
.bilah-atas .periode i.fas + font { margin-left: 0; }

/* Ponsel sempit (<=420px, mis. 360px): periode akademik ikut disembunyikan.
   Saklar bahasa (60px) + saklar mode + tombol Masuk sudah memakan hampir
   seluruh lebarnya; tanpa ini bilah atas melebihi layar dan laman bisa
   digulir ke samping (dilaporkan Bapak). Diletakkan di AKHIR berkas, bukan
   disisipkan ke tengah blok @media 640px -- sisipan di tengah sempat
   memotong blok itu sehingga aturan kop/menu/daftar ikut terbawa. */
@media (max-width: 420px) {
    .bilah-atas .periode { display: none; }
}

/* ===================== berkas akreditasi & agenda penuh =====================
   Ditambahkan 24 Sep 2026 (permintaan Bapak): nomor SK di kotak Status
   Akreditasi diganti dua tombol "Lihat", berkasnya dibuka di jendela tumpang;
   dan kotak Agenda beranda diberi tautan ke laman agenda selengkapnya.
   Ditulis di AKHIR berkas, bukan disisipkan ke tengah blok @media -- sisipan
   di tengah pernah memotong blok itu. */

/* --- tombol Lihat SK / Lihat Sertifikat (di dalam kotak hijau) --- */
/* Dua tombol ditumpuk dan SAMA LEBAR -- kolom Sekilas sempit, dua pil yang
   masing-masing selebar tulisannya terlihat tidak rata. */
.akr-dok {
    display: flex; flex-direction: column; align-items: stretch; gap: 7px;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .2);
}
.akr-lihat {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px;
    background: transparent; color: #fff; font: inherit; font-size: 11px; font-weight: 600;
    letter-spacing: .01em; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.akr-lihat i { font-size: 11px; opacity: .85; }
.akr-lihat:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .8); }
.akr-lihat:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --- jendela tumpang berkas --- */
body.dok-terbuka { overflow: hidden; }
.dok-tumpang { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.dok-tumpang[hidden] { display: none; }
.dok-latar { position: absolute; inset: 0; background: rgba(12, 16, 18, .78); }
.dok-kotak {
    position: relative; z-index: 1; display: flex; flex-direction: column;
    width: min(880px, 100%); max-height: 100%; overflow: hidden;
    background: var(--j-permukaan, #fff); border-radius: 4px; box-shadow: 0 18px 44px rgba(0, 0, 0, .4);
}
.dok-kepala {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 14px; background: var(--j-hijau); color: #fff;
    font-size: 13px; font-weight: 600;
}
.dok-aksi { display: inline-flex; align-items: center; gap: 4px; }
.dok-kepala a, .dok-tutup {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border: 0; border-radius: 3px;
    background: transparent; color: #fff !important; font-size: 13px; cursor: pointer;
}
.dok-kepala a:hover, .dok-tutup:hover { background: rgba(255, 255, 255, .18); }
.dok-isi { background: var(--j-bg); overflow: auto; }
.dok-isi img { display: block; width: 100%; height: auto; }
.dok-isi iframe { display: block; width: 100%; height: 76vh; border: 0; background: #fff; }

/* --- tautan "Lihat agenda selengkapnya" di kotak beranda --- */
.agenda-lengkap {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 11px;
    border-top: 1px solid var(--j-garis); width: 100%;
    font-size: 12px; font-weight: 600; color: var(--j-hijau);
}
.agenda-lengkap i { font-size: 10px; transition: transform .15s ease; }
.agenda-lengkap:hover i { transform: translateX(3px); }

/* --- daftar agenda utuh di laman [[AGENDA]] --- */
.agenda-penuh { margin: 4px 0 0; }
.agenda-judul {
    display: flex; align-items: center; gap: 8px;
    margin: 26px 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--j-garis);
    font-size: 15px; font-weight: 700; color: var(--j-teks);
}
.agenda-penuh > .agenda-judul:first-child { margin-top: 0; }
.agenda-judul i { font-size: 13px; color: var(--j-hijau); }
.agenda-daftar { margin: 0; padding: 0; }
.agenda-daftar li {
    display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: start;
    padding: 13px 0; border-bottom: 1px solid var(--j-garis); list-style: none;
}
.agenda-daftar li:last-child { border-bottom: 0; }
.agenda-daftar .tgl {
    background: var(--j-hijau); color: #fff; text-align: center; padding: 7px 0; line-height: 1.15;
}
.agenda-daftar .tgl b { display: block; font-size: 19px; font-weight: 600; }
.agenda-daftar .tgl span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.agenda-daftar .tgl i { display: block; font-size: 9.5px; font-style: normal; opacity: .72; margin-top: 1px; }
.agenda-daftar .judul { font-size: 14px; font-weight: 600; line-height: 1.5; }
.agenda-daftar .waktu { font-size: 12.5px; color: var(--j-redup); }
/* Yang sudah berlangsung: tetap terbaca, tetapi jelas bukan yang akan datang. */
.agenda-daftar li.lewat .tgl { background: var(--j-redup); opacity: .75; }
.agenda-daftar li.lewat .judul { font-weight: 500; color: var(--j-redup); }
.agenda-kosong { color: var(--j-redup); font-size: 13.5px; }

@media (max-width: 640px) {
    .dok-tumpang { padding: 0; }
    .dok-kotak { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
    .dok-isi iframe { height: calc(100vh - 50px); }
    .agenda-daftar li { grid-template-columns: 46px 1fr; gap: 10px; }
    .agenda-daftar .tgl b { font-size: 16px; }
    .agenda-daftar .judul { font-size: 13px; }
}