/* =====================================================================
   style.css — Website Universitas Imelda Medan (Universitas · Fakultas · Prodi)
   Lembar gaya situs publik (satu berkas untuk tiga level unit) sekaligus dasar panel admin.

   TUJUAN
   - Mendefinisikan token netral, tipografi, kelas merek (.btn-brand, .bg-brand-dark, …) dan semua komponen
     signature situs publik: header, hero slider, breadcrumb, grid satu kolom + pop-up Informasi Kontak, kartu, footer, tombol ke atas.
     Ketiga level unit memakai kelas yang SAMA; yang berbeda hanya nilai variabel --brand-* per unit.

   SIAPA YANG MEMUAT (urutan di <head> wajib dijaga: blok tema dulu, baru berkas ini)
   - partials/layout/header.php : halaman publik → <style> tema_unit($jejak) → style.css
   - admin/partials/header.php  : panel admin   → tema_unit(universitas)  → style.css → admin.css
   - admin/login.php            : halaman login → tema_unit(universitas)  → style.css → admin.css
   Bootstrap 5.3 + Bootstrap Icons (CDN) dan Google Fonts dimuat oleh file PHP tersebut (publik: Plus Jakarta Sans + Inter;
   admin/login: Merriweather + Inter).

   DEPENDENSI
   - partials/tema.php → tema_unit() menyuntik di :root SEBELUM berkas ini dibaca.
     Warna merek HANYA lewat variabel --brand-* yang disuntik tema_unit() per unit:
       --brand-primary / --brand-primary-rgb / --brand-primary-hover
       --brand-dark    / --brand-dark-rgb    / --brand-darker
       --brand-accent  / --brand-accent-rgb  / --brand-accent-hover
     (kosong di DB = mewarisi induk; universitas memakai bawaan tema_default() dari logo UIM)
   - assets/js/main.js menambah/menghapus kelas status yang digayakan di sini:
       .is-scrolled / .is-open (header), .is-active (slide & titik hero), .is-visible (tombol ke atas),
       .uim-dd-gulir + style max-height (menu navbar setinggi layar, bagian 6), .show / .uim-dd-anak--kiri / --atas (submenu, bagian 6),
       .is-balik (kartu brosur, bagian 7), .is-open (#btnKontak / #panelKontak, bagian 8),
       .uim-jalan-wadah / .uim-stat-strip--jalan / .is-jeda / .is-luar (angka berjalan, bagian 11 — KP-62, opsional);
       dd.uim-stat-hitung > span.uim-hitung / .is-selesai (angka naik, bagian 11b — KP-64).
   - Variabel Bootstrap (--bs-*) di-override di :root dan per komponen agar warna link/tombol ikut tema unit.

   ATURAN
   - Netral tetap (bukan per unit): --ink, --mist, --line, --muted, --paper. Font: Merriweather (judul) + Inter (teks) untuk panel admin;
     halaman publik (body.uim-body) menimpa token di blok "Bahasa visual publik" (KP-51 "landing page modern ala AI"): judul
     Plus Jakarta Sans, radius lebih besar, bayangan berwarna, latar mesh gradient dari warna merek, kartu/header/breadcrumb kaca
     (glassmorphism), tombol pil ber-glow, hover terangkat, blob hias di pita judul/footer (hero beranda tanpa lapisan/blob, KP-57). Token :root TIDAK diubah agar
     admin.css (memakai --radius/--shadow/--ff-display yang sama) tetap seperti semula.
   - Aturan kontras: teks putih hanya di atas --brand-primary/--brand-dark; aksen tidak pernah
     jadi latar teks putih (teks gelap #1B1B1F).
   - Jangan tulis hex merek pada komponen. Kelas kustom berprefiks uim- (kebab-case), kelas merek brand-*,
     kelas status berprefiks is-. Transisi 150–200 ms (--t); prefers-reduced-motion dihormati di blok terakhir.

   URUTAN ISI
   :root (token) → Dasar → Kelas merek → Pill → Header & navbar (+ pita unit, dropdown bertingkat Akademik .uim-dd-*) → Hero / page band →
   Breadcrumb → Grid (satu kolom) → Seksi, stat strip (+ angka berjalan KP-62), prose → Pop-up Informasi Kontak (tombol + panel + kartu kontak) → Kartu (unit, prodi,
   tautan, berita) + gambar sisipan berita → Struktur/logo, peta, pop-up video, 404 → Footer (+ ruang tombol Kontak) → Tombol ke atas → Gerak minimal.

   [PANDUAN UPDATE] Mengganti warna tema: JANGAN di berkas ini. Warna per unit diisi admin lewat
   admin/identitas.php (kolom unit.warna_primer / warna_sekunder / warna_aksen); warna bawaan universitas ada di
   tema_default() partials/tema.php. Menambah variabel merek baru: tambahkan di tema_unit() lalu pakai var() di sini.
   ===================================================================== */

/* ---- Token global (:root) ----
   Netral, font, tinggi header (--navbar-h = tinggi navbar; --pita-h = pita unit fakultas/prodi; --header-h = tinggi total header
   fixed yang dipakai padding hero/page band, max-height panel kontak & menu navbar, scroll-padding — di html.uim-level-fakultas/prodi menjadi
   navbar + pita), radius, bayangan, durasi transisi (--t), lalu override variabel Bootstrap agar warna link/primary mengikuti tema unit.
   [PANDUAN UPDATE] Mengubah warna netral, radius, atau tinggi header: cukup ganti nilai di blok ini —
   komponen di bawah hanya memakai var(). --navbar-h harus sama dengan tinggi nyata .uim-navbar (min-height). */
:root{
  --ink:#12211E; --mist:#F8FAF9; --line:#E5EAE8; --muted:#5E7370; --paper:#FFFFFF; /* --muted 5.2:1 di atas putih (teks kecil tetap AA) */
  --ff-display:'Merriweather',Georgia,'Times New Roman',serif;
  --ff-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --navbar-h:72px; --pita-h:32px; --header-h:var(--navbar-h); --radius:.5rem; --radius-sm:.35rem;
  --shadow-sm:0 1px 3px rgba(0,0,0,.05); --shadow-md:0 6px 18px rgba(10,33,28,.08); --shadow-lg:0 12px 32px rgba(0,0,0,.16);
  --t:.18s ease;
  --bs-border-radius:.35rem; --bs-border-radius-sm:.25rem; --bs-border-radius-lg:.5rem;

  /* Bootstrap mengikuti tema unit */
  --bs-primary:var(--brand-primary); --bs-primary-rgb:var(--brand-primary-rgb);
  --bs-link-color:var(--brand-primary); --bs-link-color-rgb:var(--brand-primary-rgb);
  --bs-link-hover-color:var(--brand-dark); --bs-link-hover-color-rgb:var(--brand-dark-rgb);
  --bs-body-color:var(--ink); --bs-body-font-family:var(--ff-body);
  --bs-border-color:var(--line);
}

/* ---- Dasar ----
   body.uim-body = flex kolom agar footer menempel di bawah (main.uim-main flex:1). h1–h3 memakai font display
   dengan skala h1 clamp(1.9rem,3.5vw,2.75rem) · h2 1.6rem · h3 1.2rem. :focus-visible = outline 2px --brand-accent
   (aksesibilitas, berlaku juga di panel admin). .visually-hidden-focusable = skip link "ke konten" (header.php). */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem);} /* tautan #anchor tidak tertutup header fixed */
/* ---- Bahasa visual publik (KP-51) ----
   Hanya body.uim-body (halaman publik; panel admin memakai .admin-body): judul Plus Jakarta Sans (dimuat partials/layout/header.php),
   radius & bayangan berwarna lebih besar, latar mesh gradient dari warna merek unit (radial, tanpa filter → murah), token kaca
   (--glass*) untuk kartu/header/breadcrumb/dropdown. Semua warna tetap dari --brand-* sehingga tiga level unit mengikuti temanya.
   [PANDUAN UPDATE] Ingin kembali ke tampilan lama: hapus baris token (--ff-display … --bs-border-radius-lg) dan latar mesh di
   bawah ini — nilai :root berlaku lagi dan komponen otomatis ikut. Mengubah kepekatan blob/mesh: angka alfa pada rgba() di sini,
   di .uim-page-band::before dan .uim-footer (hero beranda sengaja tanpa lapisan/blob sejak KP-57 — lihat [PANDUAN UPDATE] blok HERO). */
body.uim-body{--ff-display:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --radius:1.1rem;--radius-sm:.8rem;--radius-lg:1.6rem;--mist:#F4F7FA;--line:#E2E8EE;--muted:#536762; /* --muted 6,0:1 di atas putih, ≥ 5,3:1 di titik mesh terkuat */
  --shadow-sm:0 2px 12px rgba(var(--brand-dark-rgb),.07);--shadow-md:0 14px 36px rgba(var(--brand-dark-rgb),.12);--shadow-lg:0 26px 64px rgba(var(--brand-dark-rgb),.2);
  --glass:rgba(255,255,255,.78);--glass-border:rgba(255,255,255,.65);--glass-dark:rgba(255,255,255,.1);--glass-dark-border:rgba(255,255,255,.22);
  --bs-border-radius:.8rem;--bs-border-radius-sm:.6rem;--bs-border-radius-lg:1.1rem;
  font-family:var(--ff-body);color:var(--ink);font-size:1rem;line-height:1.65;
  background:radial-gradient(900px 520px at 92% -6%,rgba(var(--brand-accent-rgb),.14),transparent 62%),
             radial-gradient(760px 520px at -12% 38%,rgba(var(--brand-primary-rgb),.09),transparent 62%),
             radial-gradient(720px 480px at 108% 78%,rgba(var(--brand-primary-rgb),.07),transparent 60%),var(--mist);
  background-repeat:no-repeat;
  min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
main.uim-main{flex:1 0 auto;}
/* target skip link (tabindex=-1): fokus programatik tanpa cincin — box-shadow ikut dimatikan karena aturan [tabindex]:focus-visible
   di bawah ((0,2,0)) memberi cincin tinta pada seluruh <main> (KP-50) */
main.uim-main:focus,main.uim-main:focus-visible{outline:none;box-shadow:none;}
h1,h2,h3,.h1,.h2,.h3{font-family:var(--ff-display);font-weight:700;line-height:1.28;letter-spacing:-.01em;color:var(--ink);}
h1,.h1{font-size:clamp(1.9rem,3.5vw,2.75rem);}
h2,.h2{font-size:1.6rem;}
h3,.h3{font-size:1.2rem;}
img{max-width:100%;height:auto;}
a:hover{--bs-link-color-rgb:var(--brand-dark-rgb);}
/* Cincin fokus dua warna: outline aksen (terlihat di atas latar gelap) + cincin tinta di dalamnya (terlihat di atas latar putih) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brand-accent);outline-offset:2px;box-shadow:0 0 0 2px var(--ink);}
/* Bootstrap 5.3 menimpa cincin global pada komponen ini (selektornya (0,2,0) > (0,1,1)): ulangi dengan spesifisitas setara;
   style.css dimuat setelah Bootstrap sehingga aturan ini menang (KP-49) */
.nav-link:focus-visible,.accordion-button:focus-visible,.btn-close:focus-visible,.page-link:focus-visible,.btn:focus-visible,.uim-navbar .navbar-toggler:focus-visible{
  outline:2px solid var(--brand-accent);outline-offset:2px;box-shadow:0 0 0 2px var(--ink);}
.visually-hidden-focusable:focus{position:fixed;top:.5rem;left:.5rem;z-index:2000;background:#fff;padding:.5rem .75rem;border-radius:.4rem;}

/* ---- Kelas merek (warna selalu dari --brand-*) ----
   Teks/latar/garis: .text-brand, .text-brand-dark, .text-brand-accent, .bg-brand, .bg-brand-dark, .bg-brand-soft,
   .border-brand, .badge-brand. Tombol: .btn-brand (primer), .btn-outline-brand, .btn-brand-dark, .btn-brand-accent
   (teks gelap #1B1B1F di atas emas — jangan diganti putih, lihat aturan kontras). .btn-primary Bootstrap ikut tema.
   Form, pagination, dan accordion Bootstrap di-override lewat variabel --bs-* masing-masing komponen.
   [PANDUAN UPDATE] Menambah kelas merek baru: tiru pola di bawah; isi warna HANYA dengan var(--brand-…) atau
   rgba(var(--brand-…-rgb),alpha), jangan hex. */
.text-brand{color:var(--brand-primary)!important;}
.text-brand-dark{color:var(--brand-dark)!important;}
.text-brand-accent{color:var(--brand-accent)!important;}
.bg-brand{background:var(--brand-primary)!important;color:#fff;}
.bg-brand-dark{background:var(--brand-dark)!important;color:#fff;}
.bg-brand-soft{background:rgba(var(--brand-primary-rgb),.08)!important;}
.border-brand{border-color:var(--brand-primary)!important;}
.badge-brand{background:var(--brand-primary);color:#fff;}
.btn-brand{--bs-btn-color:#fff;--bs-btn-bg:var(--brand-primary);--bs-btn-border-color:var(--brand-primary);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--brand-primary-hover);--bs-btn-hover-border-color:var(--brand-primary-hover);
  --bs-btn-active-color:#fff;--bs-btn-active-bg:var(--brand-dark);--bs-btn-active-border-color:var(--brand-dark);
  --bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:var(--brand-primary);--bs-btn-disabled-border-color:var(--brand-primary);
  --bs-btn-focus-shadow-rgb:var(--brand-primary-rgb);}
.btn-outline-brand{--bs-btn-color:var(--brand-primary);--bs-btn-border-color:var(--brand-primary);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--brand-primary);--bs-btn-hover-border-color:var(--brand-primary);
  --bs-btn-active-color:#fff;--bs-btn-active-bg:var(--brand-dark);--bs-btn-active-border-color:var(--brand-dark);
  --bs-btn-disabled-color:var(--brand-primary);--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:var(--brand-primary);
  --bs-btn-focus-shadow-rgb:var(--brand-primary-rgb);}
.btn-brand-dark{--bs-btn-color:#fff;--bs-btn-bg:var(--brand-dark);--bs-btn-border-color:var(--brand-dark);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--brand-darker);--bs-btn-hover-border-color:var(--brand-darker);
  --bs-btn-active-color:#fff;--bs-btn-active-bg:var(--brand-darker);--bs-btn-active-border-color:var(--brand-darker);
  --bs-btn-focus-shadow-rgb:var(--brand-dark-rgb);}
.btn-brand-accent{--bs-btn-color:#1B1B1F;--bs-btn-bg:var(--brand-accent);--bs-btn-border-color:var(--brand-accent);
  --bs-btn-hover-color:#1B1B1F;--bs-btn-hover-bg:var(--brand-accent-hover);--bs-btn-hover-border-color:var(--brand-accent-hover);
  --bs-btn-active-color:#1B1B1F;--bs-btn-active-bg:var(--brand-accent-hover);--bs-btn-active-border-color:var(--brand-accent-hover);
  --bs-btn-focus-shadow-rgb:var(--brand-accent-rgb);font-weight:700;}
.btn-primary{--bs-btn-bg:var(--brand-primary);--bs-btn-border-color:var(--brand-primary);
  --bs-btn-hover-bg:var(--brand-primary-hover);--bs-btn-hover-border-color:var(--brand-primary-hover);
  --bs-btn-active-bg:var(--brand-dark);--bs-btn-active-border-color:var(--brand-dark);--bs-btn-focus-shadow-rgb:var(--brand-primary-rgb);}
.form-control:focus,.form-select:focus,.form-check-input:focus{
  border-color:rgba(var(--brand-primary-rgb),.55);box-shadow:0 0 0 .2rem rgba(var(--brand-primary-rgb),.15);}
/* Cincin fokus §2.4 untuk kolom formulir (tinjauan bug 2026-10-22): Bootstrap .form-control:focus{outline:0} (0,2,0) mengalahkan aturan global
   input:focus-visible (0,1,1), dan cahaya primer 15 % di atas nyaris tak terlihat (±1,3:1) → tegaskan ulang outline aksen + cincin tinta. */
.form-control:focus-visible,.form-select:focus-visible,.form-check-input:focus-visible{
  outline:2px solid var(--brand-accent);outline-offset:2px;box-shadow:0 0 0 2px var(--ink);}
.form-check-input:checked{background-color:var(--brand-primary);border-color:var(--brand-primary);}
.pagination{--bs-pagination-color:var(--brand-primary);--bs-pagination-hover-color:var(--brand-dark);
  --bs-pagination-active-bg:var(--brand-primary);--bs-pagination-active-border-color:var(--brand-primary);
  --bs-pagination-focus-color:var(--brand-dark);--bs-pagination-focus-box-shadow:0 0 0 .2rem rgba(var(--brand-primary-rgb),.15);}
.accordion{--bs-accordion-active-bg:rgba(var(--brand-primary-rgb),.07);--bs-accordion-active-color:var(--brand-dark);
  --bs-accordion-btn-focus-box-shadow:0 0 0 .2rem rgba(var(--brand-primary-rgb),.2);--bs-accordion-border-color:var(--line);}
.accordion-button{font-family:var(--ff-display);font-weight:700;font-size:1.05rem;}
.accordion-button:not(.collapsed)::after{filter:grayscale(1) brightness(.4);}
.breadcrumb a{text-decoration:none;}

/* ---- Lapisan komponen publik (KP-51): judul lebih tebal/rapat, tombol pil ber-glow, form & akordion kaca, pagination pil ----
   Semua berawalan .uim-body sehingga panel admin (.admin-body) tidak terpengaruh. Hover tombol/kartu "terangkat" (translateY)
   dimatikan pada prefers-reduced-motion (blok terakhir). */
.uim-body h1,.uim-body h2,.uim-body h3,.uim-body .h1,.uim-body .h2,.uim-body .h3{font-weight:800;letter-spacing:-.02em;line-height:1.2;}
.uim-body .btn{border-radius:999px;font-weight:600;padding:.6rem 1.25rem;transition:transform var(--t),box-shadow var(--t),background-color var(--t),border-color var(--t),color var(--t);}
.uim-body .btn-sm{padding:.4rem .95rem;font-size:.82rem;}
.uim-body .btn:hover{transform:translateY(-2px);}
.uim-body .btn-brand{box-shadow:0 8px 24px rgba(var(--brand-primary-rgb),.28);}
.uim-body .btn-brand:hover{box-shadow:0 12px 30px rgba(var(--brand-primary-rgb),.36);}
.uim-body .btn-brand-accent{box-shadow:0 8px 24px rgba(var(--brand-accent-rgb),.38);}
.uim-body .btn-brand-accent:hover{box-shadow:0 12px 32px rgba(var(--brand-accent-rgb),.48);}
/* Komponen Bootstrap berstatus (tombol, pagination, form) diubah lewat VARIABEL komponennya (--bs-btn-bg, --bs-pagination-bg, …), BUKAN
   shorthand `background` — selektor status Bootstrap (.btn:hover, .btn:focus-visible, .page-link.active) berspesifisitas sama (0,2,0) dan
   akan kalah oleh aturan di sini yang dimuat belakangan, sehingga teks putih status hover/aktif jatuh di atas latar putih (tinjauan KP-51). */
.uim-body .btn-outline-brand{--bs-btn-bg:rgba(255,255,255,.55);}
.uim-body .btn-outline-light{--bs-btn-bg:var(--glass-dark);--bs-btn-border-color:var(--glass-dark-border);--bs-btn-hover-bg:rgba(255,255,255,.92);
  --bs-btn-hover-border-color:rgba(255,255,255,.92);--bs-btn-active-bg:#fff;--bs-btn-active-border-color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
/* cincin fokus tinta (KP-49) harus tetap menang atas glow tombol/pil/daftar saat fokus keyboard; akordion: cincin digambar DI DALAM tombol
   karena .accordion-item ber-overflow:hidden (sudut membulat) memotong outline di luar */
.uim-body .btn:focus-visible{box-shadow:0 0 0 2px var(--ink);}
.uim-subnav a:focus-visible,.uim-subnav a.is-active:focus-visible,.uim-dok-list a:focus-visible{box-shadow:0 0 0 2px var(--ink);}
.uim-body .accordion-button:focus-visible{outline-offset:-4px;box-shadow:inset 0 0 0 2px var(--ink);}
.uim-body .form-control,.uim-body .form-select{border-radius:.85rem;border-color:rgba(18,33,30,.12);background-color:rgba(255,255,255,.92);padding:.65rem .95rem;}
.uim-body .form-select{padding-right:2.5rem;} /* ruang ikon panah Bootstrap (background-image tetap milik Bootstrap) */
.uim-body .form-control:focus,.uim-body .form-select:focus{border-color:rgba(var(--brand-primary-rgb),.55);}
.uim-body textarea.form-control{border-radius:1rem;}
.uim-body .page-link{border-radius:999px;margin:0 .15rem;--bs-pagination-bg:rgba(255,255,255,.8);--bs-pagination-border-color:transparent;}
.uim-body .accordion{--bs-accordion-border-color:transparent;--bs-accordion-bg:transparent;}
.uim-body .accordion-item{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-sm)!important;overflow:hidden;margin-bottom:.65rem;box-shadow:var(--shadow-sm);}
.uim-body .accordion-button{background:transparent;}
.uim-body .accordion-button:not(.collapsed){background:rgba(var(--brand-primary-rgb),.07);}
.uim-body .alert{border-radius:var(--radius-sm);border:0;box-shadow:var(--shadow-sm);}

/* ---- Pill / tag ----
   .uim-pill = label kategori berita / jenjang / akreditasi. Varian: --unit (label unit asal pada berita agregat),
   --aksen & --aksen-solid (emas, teks gelap), --putih (di atas latar gelap: hero, kartu prodi). */
.uim-pill{display:inline-flex;align-items:center;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:.24rem .65rem;border-radius:999px;background:rgba(var(--brand-primary-rgb),.08);color:var(--brand-primary-hover);line-height:1.3;border:1px solid rgba(var(--brand-primary-rgb),.14);}
  /* teks pill memakai --brand-primary-hover (0,82× lebih gelap, hue sama): primer yang pas 4,5:1 di atas putih turun ±10 % di atas tint (KP-50) */
.uim-pill--unit{background:rgba(var(--brand-dark-rgb),.1);color:var(--brand-dark);border-color:rgba(var(--brand-dark-rgb),.14);}
.uim-pill--aksen{background:rgba(var(--brand-accent-rgb),.25);color:#1B1B1F;border-color:rgba(var(--brand-accent-rgb),.5);}
.uim-pill--putih{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.35);}
.uim-pill--aksen-solid{background:var(--brand-accent);color:#1B1B1F;border-color:transparent;}

/* =====================================================================
   HEADER & NAVBAR (partials/layout/navbar.php)
   .uim-header tetap di atas (fixed, z-index 1030). Kelas status dari assets/js/main.js:
     .uim-header--transparan (dipasang navbar.php saat ada hero) → transparan penuh di atas hero (tanpa lapisan warna, KP-57);
     .is-scrolled (scrollY > 24) → kaca --brand-dark 92% + blur (cukup pekat agar teks menu ≥ 4,5:1 di atas konten terang);
     .is-open (menu mobile terbuka) → 88% (panel collapse-nya sendiri solid).
   Isi: logo bulat putih (.uim-brand-logo), nama unit + nama induk kecil (.uim-brand-text), menu uppercase dengan
   garis bawah aksen pada item aktif, dropdown bergaris atas aksen, tombol Daftar Sekarang (.uim-nav-daftar),
   ikon Login (.uim-nav-ikon).
   ===================================================================== */
/* header kaca: --brand-dark tembus pandang + blur (KP-51); di atas hero TRANSPARAN penuh sampai di-scroll (KP-57: tanpa gradasi hitam —
   area di belakang navbar adalah latar --brand-dark milik hero itu sendiri karena foto slide dimulai di bawah header, KP-53) */
.uim-header{position:fixed;top:0;left:0;right:0;z-index:1030;background:rgba(var(--brand-dark-rgb),.88);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.12);transition:background var(--t),box-shadow var(--t);}
.uim-header--transparan:not(.is-scrolled):not(.is-open){
  background:transparent;border-bottom-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;}
.uim-header.is-scrolled{background:rgba(var(--brand-dark-rgb),.92);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 10px 40px rgba(0,0,0,.25);}
/* ---- Pita unit (navbar.php; hanya html.uim-level-fakultas / -prodi) ----
   Strip 32 px di atas navbar: "<Level> di bawah Universitas …" + tautan Beranda Fakultas (dari prodi) & Beranda Universitas —
   jalan cepat pindah tingkat (KP-40). Tinggi header total bertambah --pita-h agar hero/pita judul tidak tertutup.
   < 576 px teks kiri disembunyikan (hanya tautan); label "Beranda" muncul ≥ 768 px. */
html.uim-level-fakultas,html.uim-level-prodi{--header-h:calc(var(--navbar-h) + var(--pita-h));}
.uim-pita-unit{height:var(--pita-h);background:var(--brand-darker);color:rgba(255,255,255,.82);font-size:.78rem;border-bottom:1px solid rgba(255,255,255,.08);}
.uim-pita-unit .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:100%;}
.uim-pita-unit-teks{align-items:center;gap:.4rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.uim-pita-unit-teks i{color:var(--brand-accent);}
.uim-pita-unit-tautan{display:flex;align-items:center;gap:.25rem;flex:0 1 auto;min-width:0;max-width:100%;}
/* display:block (bukan inline-flex) agar text-overflow:ellipsis benar-benar memotong nama panjang dengan "…" di layar sempit (KP-49) */
.uim-pita-unit-tautan a{display:block;color:#fff;font-weight:600;text-decoration:none;padding:.2rem .55rem;line-height:1.5;
  border-radius:.3rem;white-space:nowrap;min-width:0;max-width:60vw;overflow:hidden;text-overflow:ellipsis;transition:background var(--t),color var(--t);}
.uim-pita-unit-tautan a i{margin-right:.3rem;}
.uim-pita-unit-tautan a:hover,.uim-pita-unit-tautan a:focus-visible{background:rgba(255,255,255,.12);color:var(--brand-accent-text,var(--brand-accent));}
.uim-pita-unit-univ{border:1px solid rgba(255,255,255,.25);}
.uim-navbar{padding:.45rem 0;min-height:var(--navbar-h);}
/* .uim-brand: flex-basis 0 + grow (dibatasi max-content) agar di baris pertama navbar (flex-wrap) tombol hamburger selalu muat
   di sebelahnya dan nama unit panjang dipotong "…" (KP-49). Dengan basis auto, item berbasis lebar nama panjang akan melipat
   hamburger ke baris kedua sebelum sempat menyusut. Teks dibatasi 300 px hanya di layar lebar agar tidak memakan ruang menu. */
.uim-brand{display:flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none;min-width:0;flex:1 1 0;max-width:max-content;margin-right:.75rem;}
.uim-brand-logo{width:48px;height:48px;object-fit:contain;background:#fff;border-radius:50%;padding:2px;flex:0 0 48px;
  box-shadow:0 0 0 3px rgba(255,255,255,.16),0 4px 14px rgba(0,0,0,.3);} /* cincin kaca tipis + bayangan */
.uim-brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
.uim-brand-text strong{font-family:var(--ff-display);font-size:.98rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.uim-brand-text small{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
@media (min-width:992px){.uim-brand-text strong,.uim-brand-text small{max-width:420px;}} /* nama prodi panjang tetap terbaca di desktop; menyusut bila menu butuh ruang */
/* ≥992 px navbar tidak melipat (navbar-expand-lg → flex-wrap:nowrap) sehingga basis auto aman: nama unit tampil PENUH selama muat dan
   baru dipotong "…" bila menu benar-benar tidak muat (nama prodi panjang pada 992–1199 px). Basis 0 di atas hanya untuk < 992 px (KP-49).
   Pada 992–1199 px (container 960 px) menu dipadatkan agar nama unit mendapat ruang lebih (KP-52). */
@media (min-width:992px){.uim-brand{flex:1 1 auto;}}
@media (min-width:992px) and (max-width:1199.98px){
  .uim-navbar .nav-link{padding:.5rem .55rem;font-size:.8rem;}
  .uim-nav-daftar{margin:0 .25rem;}
  .uim-nav-daftar .btn{padding:.4rem .7rem;font-size:.74rem;}
}
.uim-navbar .nav-link{color:rgba(255,255,255,.88);font-weight:600;font-size:.84rem;letter-spacing:.03em;text-transform:uppercase;
  padding:.55rem .85rem;border-radius:999px;transition:color var(--t),background-color var(--t);}
.uim-navbar .nav-link:hover,.uim-navbar .nav-link:focus,.uim-navbar .nav-link.active,.uim-navbar .show>.nav-link{color:#fff;background:rgba(255,255,255,.1);}
/* item aktif desktop: pil aksen tembus pandang + garis tipis aksen (penanda non-warna); di mobile ditimpa garis kiri (blok @media di bawah) */
.uim-navbar .nav-link.active{background:rgba(var(--brand-accent-rgb),.2);box-shadow:inset 0 0 0 1px rgba(var(--brand-accent-rgb),.55);}
.uim-navbar .nav-link.uim-nav-ikon{font-size:1.25rem;padding:.4rem .6rem;text-transform:none;display:flex;align-items:center;}
.uim-navbar .dropdown-toggle::after{opacity:.7;}
/* dropdown kaca (KP-51): putih tembus pandang + blur, sudut membulat, item ber-radius; di mobile ditimpa blok @media (latar gelap) */
.uim-navbar .dropdown-menu{border:1px solid var(--glass-border,rgba(255,255,255,.6));border-top:3px solid var(--brand-accent);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.93);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:var(--shadow-lg);min-width:270px;padding:.5rem .45rem;margin-top:.5rem;} /* .93 (bukan --glass .78): menu sering menutupi hero gelap → teks --muted tetap ≥ 4,5:1 */
.uim-navbar .dropdown-item{font-size:.9rem;padding:.55rem 1.1rem;display:flex;align-items:center;gap:.6rem;color:var(--ink);white-space:normal;border-radius:.6rem;}
.uim-navbar .dropdown-item i:first-child{color:var(--brand-primary);width:1.1rem;text-align:center;flex:0 0 1.1rem;}
.uim-navbar .dropdown-item:hover,.uim-navbar .dropdown-item:focus{background:rgba(var(--brand-primary-rgb),.08);color:var(--brand-primary);}
.uim-navbar .dropdown-item:active{background:var(--brand-primary);color:#fff;}
.uim-navbar .dropdown-item:active i{color:#fff;}
.uim-navbar .dropdown-header{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:.5rem 1.1rem .25rem;}
/* ---- Dropdown BERTINGKAT (AKADEMIK; navbar.php nav_dropdown_daftar(), main.js bagian 6) ----
   li.uim-dd-submenu > button.dropdown-item.uim-dd-toggle (ikon + .uim-dd-teks + panah .uim-dd-panah) + ul.dropdown-menu.uim-dd-anak.
   Kelas .show pada <li> (dipasang main.js: hover / klik / keyboard) menampilkan submenunya.
   ≥992px : submenu melayang di kanan induknya; main.js memberi .uim-dd-anak--kiri / --atas bila tidak muat di layar.
   <992px : submenu dilipat di bawah induknya (posisi statis; klik panah membuka/menutup, panah berputar 90°).
   TEKS PANJANG SELALU MELIPAT ke baris berikutnya: .dropdown-item white-space:normal + .uim-dd-teks min-width:0 — tidak pernah
   melebar keluar batas menu (lebar menu dibatasi max-width). Badge jenjang (.uim-dd-jenjang) & panah tetap di kanan.
   [PANDUAN UPDATE] Lebar menu (min/max-width) di baris pertama dan di blok @media (min-width:992px) untuk submenu. */
.uim-navbar .dropdown-menu{min-width:290px;max-width:min(360px,calc(100vw - 2rem));}
.uim-navbar .dropdown-item{align-items:flex-start;}
.uim-navbar .dropdown-item i:first-child{margin-top:.2rem;}
.uim-dd-teks{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.3;overflow-wrap:anywhere;}
.uim-dd-ket{display:block;font-size:.72rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:.1rem;}
.uim-navbar .dropdown-item.uim-dd-utama{font-weight:700;}
.uim-dd-jenjang{flex:0 0 auto;align-self:center;margin-left:.25rem;font-size:.64rem;font-weight:700;letter-spacing:.04em;padding:.1rem .4rem;
  border-radius:.3rem;background:var(--mist);border:1px solid var(--line);color:var(--muted);line-height:1.4;}
.uim-dd-panah,.uim-dd-ekst{flex:0 0 auto;align-self:center;margin-left:.25rem;font-size:.7rem;color:var(--muted);transition:transform var(--t);}
.uim-navbar .dropdown-item.active,.uim-navbar .dropdown-item.active:hover,.uim-navbar .dropdown-item.active:focus{
  background:rgba(var(--brand-primary-rgb),.12);color:var(--brand-dark);font-weight:700;}
.uim-navbar .dropdown-item.active .uim-dd-jenjang{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff;}
.uim-dd-submenu{position:relative;list-style:none;}
.uim-navbar .dropdown-item.uim-dd-toggle{cursor:pointer;}
.uim-dd-submenu.show>.uim-dd-toggle{background:rgba(var(--brand-primary-rgb),.08);color:var(--brand-primary);}
.uim-dd-submenu.show>.uim-dd-toggle .uim-dd-panah{color:var(--brand-primary);}
/* <ul> submenu tidak memakai kelas .dropdown-menu (lihat navbar.php) → gaya dasarnya didefinisikan di sini */
.uim-navbar .uim-dd-anak{display:none;list-style:none;margin:0;padding:.5rem 0;background:var(--paper);color:var(--ink);font-size:.9rem;text-align:left;}
.uim-dd-submenu.show>.uim-dd-anak{display:block;}
.uim-navbar .uim-dd-anak .dropdown-header{white-space:normal;}
.uim-navbar .uim-dd-anak .dropdown-item{font-size:.86rem;padding:.42rem 1rem .42rem .9rem;}
.uim-navbar .uim-dd-anak .dropdown-item i:first-child{font-size:.65rem;width:.8rem;flex-basis:.8rem;color:var(--muted);margin-top:.3rem;}
.uim-navbar .uim-dd-anak .dropdown-item.uim-dd-utama i:first-child{font-size:.9rem;color:var(--brand-primary);margin-top:.15rem;}
.uim-navbar .uim-dd-anak .dropdown-header{padding-left:.9rem;}
@media (min-width:992px){
  .uim-navbar .uim-dd-anak{position:absolute;top:-.5rem;left:100%;margin:0;min-width:270px;max-width:min(340px,calc(100vw - 2rem));
    max-height:calc(100vh - var(--header-h) - 2rem);overflow-y:auto;border:1px solid var(--glass-border,rgba(255,255,255,.6));border-top:3px solid var(--brand-accent);border-radius:var(--radius-sm);
    background:rgba(255,255,255,.93);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
    box-shadow:var(--shadow-lg);z-index:1031;}
  /* catatan: overflow-y pada submenu membuat submenu tingkat ketiga (bila kelak ada) ikut terpotong — saat ini maksimal dua tingkat */
  .uim-navbar .uim-dd-anak--kiri{left:auto;right:100%;}
  .uim-navbar .uim-dd-anak--atas{top:auto;bottom:-.5rem;}
  /* MODE GULIR (KP-57; keluhan user "di akademik fakultas kesehatan navbarnya tidak bisa scroll"): menu yang lebih tinggi daripada ruang di
     bawah header (Akademik FKes ±558 px, padahal laptop 1366×768 hanya menyisakan ±520 px) diberi .uim-dd-gulir + max-height inline oleh
     main.js bagian 6 → isinya dapat digulir (roda tetikus, sentuh, keyboard). Submenu tidak dapat melayang keluar dari wadah ber-overflow
     (akan terpotong), jadi pada mode ini submenu DILIPAT di bawah induknya (seperti ponsel) dan dibuka lewat klik/Enter/→, bukan hover.
     Menu yang muat tetap memakai submenu melayang. [PANDUAN UPDATE] Jarak aman tepi bawah (8 px) ada di main.js ddAturGulir(). */
  .uim-navbar .dropdown-menu.uim-dd-gulir{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}
  .uim-navbar .uim-dd-gulir .uim-dd-anak{position:static;min-width:0;max-width:none;max-height:none;overflow:visible;z-index:auto;
    margin:0 0 .35rem 1.55rem;padding:.1rem 0 .1rem .35rem;border:0;border-left:2px solid rgba(var(--brand-primary-rgb),.3);border-radius:0;
    background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
  .uim-navbar .uim-dd-gulir .uim-dd-submenu.show>.uim-dd-toggle .uim-dd-panah{transform:rotate(90deg);}
}
.uim-nav-daftar{margin:0 .5rem;}
.uim-nav-daftar .btn{padding:.45rem .9rem;letter-spacing:.03em;text-transform:uppercase;font-size:.78rem;}
.navbar-toggler{border:1px solid rgba(255,255,255,.4);color:#fff;font-size:1.4rem;padding:.2rem .5rem;line-height:1;}
.navbar-toggler:focus{box-shadow:0 0 0 .2rem rgba(var(--brand-accent-rgb),.5);}
/* Menu mobile (< 992px = breakpoint lg Bootstrap, harus sama dengan navbar-expand-lg di navbar.php):
   collapse jadi panel gelap yang bisa di-scroll, dropdown tampil inline tanpa bayangan, tombol Daftar lebar penuh.
   [PANDUAN UPDATE] Bila breakpoint hamburger diganti (mis. xl), ubah 991.98px di sini DAN kelas navbar-expand-* di navbar.php. */
@media (max-width:991.98px){
  /* tinggi panel = tinggi layar yang TERLIHAT (100dvh: di ponsel bilah alamat/navigasi browser tidak ikut dihitung — dengan 100vh butir
     terbawah bisa tersembunyi di balik bilah itu) dikurangi header & margin atas panel; baris 100vh = cadangan browser lama (KP-57).
     overscroll-behavior:contain → menggulir sampai ujung menu tidak ikut menggulir halaman di belakangnya. */
  .uim-navbar .navbar-collapse{background:var(--brand-dark);margin:.5rem -.75rem 0;padding:.5rem 1rem 1rem;
    max-height:calc(100vh - var(--header-h) - .5rem);overflow-y:auto;overscroll-behavior:contain;
    border-top:1px solid rgba(255,255,255,.1);}
  /* dvh di @supports (tinjauan KP-60): baris dvh ber-var() biasa menggantikan cadangan 100vh di kaskade, sehingga browser tanpa dvh mendapat
     max-height:none — panel menu yang panjang tidak dapat digulir di bawah header fixed */
  @supports (height:100dvh){.uim-navbar .navbar-collapse{max-height:calc(100dvh - var(--header-h) - .5rem);}}
  .uim-navbar .nav-link{padding:.7rem .25rem;border-radius:.5rem;background:transparent;border-bottom:1px solid rgba(255,255,255,.08);}
  /* item aktif: teks aksen → putih bila kontras aksen-vs-sekunder < 4,5:1 (--brand-accent-text, tema.php); garis aksen di kiri (inset, seperti
     garis bawah desktop) = penanda aktif yang tidak bergantung pada warna (KP-50) */
  .uim-navbar .nav-link.active{box-shadow:inset 3px 0 0 var(--brand-accent);padding-left:.6rem;color:var(--brand-accent-text,var(--brand-accent));}
  .uim-navbar .navbar-collapse .nav-link.active{background:rgba(255,255,255,.08);} /* pil aksen desktop tidak dipakai di panel gelap */
  .uim-navbar .dropdown-menu{background:rgba(255,255,255,.06);border:0;box-shadow:none;margin:0 0 .5rem;padding:.25rem 0;backdrop-filter:none;-webkit-backdrop-filter:none;}
  .uim-navbar .dropdown-item{color:rgba(255,255,255,.88);padding-left:1.5rem;}
  .uim-navbar .dropdown-item i:first-child{color:var(--brand-accent);}
  .uim-navbar .dropdown-item:hover,.uim-navbar .dropdown-item:focus{color:#fff;background:rgba(255,255,255,.08);}
  /* Teks sekunder di menu gelap memakai putih hampir opak (.92) — latar --brand-dark dipilih admin, alfa rendah bisa jatuh di bawah 4,5:1 */
  .uim-navbar .dropdown-header{color:rgba(255,255,255,.92);}
  .uim-navbar .dropdown-divider{border-color:rgba(255,255,255,.15);}
  .uim-navbar .dropdown-menu{max-width:none;}
  /* submenu bertingkat di mobile: statis, dilipat di bawah induk, indentasi bertambah tiap tingkat */
  .uim-navbar .uim-dd-anak{position:static;background:rgba(0,0,0,.18);color:inherit;margin:0;padding:.2rem 0 .4rem;box-shadow:none;border:0;border-radius:0;}
  .uim-navbar .uim-dd-anak .dropdown-item{padding-left:2.4rem;}
  .uim-navbar .uim-dd-anak .uim-dd-anak .dropdown-item{padding-left:3.3rem;}
  .uim-navbar .uim-dd-anak .dropdown-header{padding-left:2.4rem;}
  .uim-dd-ket{color:rgba(255,255,255,.92);}
  .uim-dd-panah,.uim-dd-ekst{color:rgba(255,255,255,.75);}
  .uim-dd-submenu.show>.uim-dd-toggle{background:rgba(255,255,255,.08);color:#fff;}
  .uim-dd-submenu.show>.uim-dd-toggle .uim-dd-panah{color:var(--brand-accent);transform:rotate(90deg);}
  .uim-navbar .uim-dd-anak .dropdown-item i:first-child{color:rgba(255,255,255,.6);}
  .uim-navbar .uim-dd-anak .dropdown-item.uim-dd-utama i:first-child{color:var(--brand-accent);}
  .uim-dd-jenjang{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff;}
  /* :focus ikut disebut agar aturan desktop .active:focus (warna --brand-dark) tidak menang di menu gelap mobile */
  .uim-navbar .dropdown-item.active,.uim-navbar .dropdown-item.active:hover,.uim-navbar .dropdown-item.active:focus{background:rgba(255,255,255,.12);color:var(--brand-accent-text,var(--brand-accent));}
  .uim-navbar .dropdown-item.active .uim-dd-jenjang{background:var(--brand-accent);border-color:var(--brand-accent);color:#1B1B1F;}
  .uim-nav-daftar{margin:.75rem 0 .25rem;}
  .uim-nav-daftar .btn{width:100%;}
}

/* =====================================================================
   HERO SLIDER / HERO STATIS (partials/layout/hero.php)
   #heroSlider (.uim-hero.uim-hero--foto.uim-hero--slider) berisi .uim-hero-track dengan beberapa .uim-hero-slide yang ditumpuk dalam
   satu sel grid; main.js memberi .is-active pada slide & titik (.uim-hero-dot) yang tampil. Autoplay 7 detik, jeda saat hover, panah,
   dan swipe ada di JS — CSS hanya menangani transisi opacity .6s. Foto slide = <img class="uim-hero-img"> (KP-60; dulu background-image
   inline ber-cover yang memotong foto) — hero tidak memakai style inline lagi (satu-satunya gaya inline = height trek yang dipasang main.js
   sementara selama animasi tinggi KP-65).
   TANPA LAPISAN WARNA (KP-57, permintaan user "tampilannya jangan ada lapisan warna lain, cukup trans"): foto slide tampil apa adanya —
   tidak ada gradasi --brand-dark, pola kisi, maupun blob cahaya di atasnya; keterbacaan dijaga pada elemen itu sendiri (bukan lapisan
   di atas foto): text-shadow pada judul & subjudul, latar gelap pada eyebrow, tombol garis putih, panah, titik, dan tombol jeda.
   Hero statis (tanpa slide) = satu warna polos --brand-dark.
   .uim-typing-wrap / .uim-typing-cursor = efek ketik frasa_ketik (kursor berkedip @keyframes uimBlink).
   [PANDUAN UPDATE] Foto slide sebaiknya punya area tenang/gelap di sisi kiri (tempat teks). Ingin gradasi gelap lagi untuk foto yang
   terlalu terang: tambahkan kembali background linear-gradient pada .uim-hero-slide::after (z-index 0) — catat sebagai KP baru.
   ===================================================================== */
/* Kotak hero bersama (MODE A/B/D). Hero tanpa foto (statis) setinggi isinya / min-height di bawah; hero berfoto (.uim-hero--foto)
   setinggi fotonya. Isi selalu dimulai DI BAWAH header fixed (padding-top = --header-h) sehingga tidak ada bagian gambar yang tertutup
   navbar — area header memperlihatkan --brand-dark (KP-53). */
.uim-hero{position:relative;isolation:isolate;min-height:clamp(520px,80vh,860px);background:var(--brand-dark);color:#fff;overflow:hidden;
  display:flex;align-items:center;padding-top:var(--header-h);}
/* Blob cahaya melayang (uimFloat) kini hanya dipakai pita judul halaman lain (.uim-page-band::before); hero beranda tanpa blob (KP-57). */
@keyframes uimFloat{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(-7%,9%,0) scale(1.12);}}
/* HERO BERFOTO — foto UTUH, tidak dipotong (KP-60, permintaan user "upade ukuran gambar dashboard sesuai nya jangan kepotong"; dulu
   background-size:cover dalam kotak ±80 % tinggi layar memotong atas/bawah foto 3:2 di laptop dan >50 % kiri/kanan di ponsel).
   KP-65 (permintaan user 2026-10-23 "saya mau full fotonya tanpa latar seperti itu, paskan"): foto SELEBAR hero dengan tinggi mengikuti rasio
   aslinya TANPA batas satu layar dan TANPA latar buram — dulu KP-60/KP-61 membatasi tinggi foto satu layar (max-height) sehingga foto 16:9 di
   laptop 16:9 diperkecil (header memakan 72 px) dan sisi kiri/kanannya diisi foto yang sama diburamkan (.uim-hero-latar, kini dihapus).
   Foto lebih tinggi dari layar (3:2, 4:3) → bagian bawahnya di luar layar pertama dan tampak saat digulir — bukan dipotong; titik & tombol
   jeda tetap di layar pertama (aturan bottom:max() di bawah). Tidak ada lapisan apa pun di atas foto (KP-57).
   Dipakai slider beranda (MODE A, + .uim-hero--slider) dan beranda halaman RS (MODE D, + .uim-hero--wahana). Foto = <img class="uim-hero-img">.
   Slide = grid satu sel: foto & teks bertumpuk (teks di atas foto) ≥ 768 px; < 768 px teks turun ke bawah foto (media query di bawah).
   .uim-hero-track menumpuk semua slide dalam satu sel grid; KP-65: tinggi trek = slide yang AKTIF saja — slide lain position:absolute (tidak
   ikut menentukan tinggi) sehingga setiap foto pas tanpa pita kosong; main.js (bagian 2, animasiTinggi()) menganimasikan tinggi trek saat
   berganti slide beda rasio (height inline sementara .6s, sama dengan fade) dan menghentikan autoplay selama hero di luar layar agar isi di
   bawah hero tidak bergeser ketika sedang dibaca. Trek overflow:hidden = memotong slide baru selama tinggi trek masih dianimasikan.
   [PANDUAN UPDATE] Foto luar (Google Drive) tanpa width/height memakai kotak 16:9 HANYA sampai fotonya termuat (aspect-ratio:auto 16/9 →
   sesudah termuat rasio asli foto) — file lokal sudah membawa width/height dari hero.php (gambar_dimensi()). Ingin membatasi tinggi hero
   lagi: tambahkan max-height pada .uim-hero-img (foto akan diperkecil utuh dengan sisa kiri/kanan berlatar --brand-dark) — catat sebagai KP baru. */
.uim-hero.uim-hero--foto{display:block;min-height:0;}
/* minmax(0,1fr) (tinjauan KP-60): kolom grid tidak boleh dilebarkan kata/tagar/URL panjang — tanpa ini satu kata panjang di slide mana pun
   (juga slide tersembunyi) melebarkan trek & semua foto, lalu sisi kanannya terpotong overflow hero */
.uim-hero-track{position:relative;display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;}
.uim-hero-track > .uim-hero-slide{grid-area:1/1;}
/* KP-65: hanya slide aktif yang ada di alur (menentukan tinggi trek); slide lain absolut selebar trek dengan tinggi ALAMINYA sendiri (top/left/
   right tanpa bottom) — saat memudar keluar, slide lama tetap tampak persis seperti tata letaknya semula (foto rata atas, teks di tempatnya; bila
   dipaksa setinggi trek, teksnya yang ditengahkan ikut bergeser selama tinggi trek beranimasi) sementara trek beralih ke tinggi slide baru dan
   memotong sisanya (overflow:hidden) */
.uim-hero-track > .uim-hero-slide:not(.is-active){position:absolute;top:0;left:0;right:0;}
.uim-hero-slide{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;overflow:hidden;opacity:0;visibility:hidden;
  transition:opacity .6s ease,visibility .6s;}
.uim-hero-slide > *{grid-area:1/1;min-width:0;}
.uim-hero-slide.is-active{opacity:1;visibility:visible;z-index:1;}
/* Slide yang baru masuk tidak menerima ketukan selama awal transisi (main.js memasang .is-masuk ±300 ms): ketukan pada tombol slide lama yang
   masih terlihat tidak jatuh ke tombol slide baru yang hampir transparan di titik yang sama (tinjauan KP-60) */
.uim-hero-slide.is-masuk{pointer-events:none;}
/* KP-65: selebar hero, tinggi = rasio foto (height:auto) — tanpa max-height & tanpa object-fit (kotak = foto, tidak ada sisa yang perlu diisi) */
.uim-hero-img{position:relative;z-index:1;display:block;width:100%;height:auto;}
/* Foto luar (Google Drive/URL) tanpa width/height: kotak 16:9 selama foto belum termuat (tinggi hero tidak nol), lalu rasio ASLI foto begitu
   termuat ("auto" = rasio alami replaced element menang bila ada — KP-65; dulu kotak TETAP 16:9 berisi foto contain + latar buram).
   File lokal memakai rasio aslinya sejak awal (width/height dari hero.php). */
.uim-hero-img:not([width]){aspect-ratio:auto 16/9;}
/* KP-66: slide VIDEO (animasi logo) — <video class="uim-hero-img uim-hero-video" muted loop playsinline> mengikuti semua aturan foto di atas
   (selebar hero, tinggi = rasio video; kotak 16:9 sampai metadata termuat). Latar --brand-dark mengisi sisa kotak bila poster/video berasio
   lain (object-fit:contain menjaga video utuh); tanpa kontrol bawaan (main.js memutar/menjeda; kurangi gerak → kontrol bawaan ditampilkan).
   .uim-hero-cadangan = <img hidden> poster/placeholder yang ditampilkan main.js bila videonya gagal dimuat. */
.uim-hero-video{background:var(--brand-dark);object-fit:contain;}
.uim-hero-content{position:relative;z-index:2;padding-top:2.5rem;padding-bottom:3.5rem;}
/* ≥ 768 px foto menempel di bawah header walau blok teks lebih tinggi dari foto (ponsel lanskap, zoom besar, hero RS bertagline panjang):
   tanpa ini foto ditengahkan di slide yang dipertinggi teks dan bagian bawahnya keluar dari layar pertama (tinjauan KP-60) */
@media (min-width:768px){.uim-hero-slide > .uim-hero-img{align-self:start;}}
/* Teks di atas foto tanpa lapisan (KP-57): bayangan berlapis pada teks itu sendiri — rapat (tepi huruf) + lebar (halo) — agar judul &
   subjudul putih tetap terbaca di atas bagian foto yang terang. Frasa ketik (.uim-typing-wrap) ikut mewarisi bayangan judul.
   Subjudul (huruf kecil) diberi garis gelap rapat 0 0 2px + bobot 500 (tinjauan KP-57, uji foto putih/krem): tepi huruf tetap tegas. */
.uim-hero-slide .uim-hero-title{text-shadow:0 1px 2px rgba(0,0,0,.65),0 2px 18px rgba(0,0,0,.55);}
.uim-hero-slide .uim-hero-sub{color:#fff;font-weight:500;text-shadow:0 0 2px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.8),0 2px 14px rgba(0,0,0,.65);}
/* padding kiri/kanan = ruang panah slide (1rem tepi + 44 px tombol + .75rem jarak) agar panah tidak menimpa huruf awal judul;
   < 768 px ditimpa 2.9rem (panah 38 px) di media query bawah */
.uim-hero-slide .uim-hero-content{max-width:860px;margin-left:0;padding-left:calc(1rem + 44px + .75rem);padding-right:calc(1rem + 44px + .75rem);}
/* eyebrow = pil kaca dengan titik aksen berpendar; teks aksen → putih bila aksen vs sekunder < 4,5:1 (tema.php) */
.uim-hero-eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.74rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand-accent-text,var(--brand-accent));margin-bottom:1rem;
  padding:.4rem .9rem .4rem .7rem;border-radius:999px;background:rgba(0,0,0,.3);border:1px solid var(--glass-dark-border,rgba(255,255,255,.22));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);} /* latar gelap tembus pandang: teks tetap terbaca di atas foto terang / blob primer */
.uim-hero-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-accent);box-shadow:0 0 0 4px rgba(var(--brand-accent-rgb),.25);}
/* overflow-wrap:anywhere (tinjauan KP-60): kata/tagar/URL yang lebih lebar dari layar dipatahkan, tidak melebarkan hero */
.uim-hero-title{font-family:var(--ff-display);font-weight:800;font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.12;letter-spacing:-.025em;color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.4);margin-bottom:1rem;overflow-wrap:anywhere;}
/* Frasa ketik: .uim-typing-ukur (semua frasa, tak terlihat) & .uim-typing-isi (frasa yang sedang diketik) ditumpuk dalam SATU sel grid →
   tinggi baris = frasa terpanjang, sehingga hero tidak naik-turun saat frasa melipat ke baris berikutnya lalu dihapus (tinjauan KP-60) */
.uim-typing-wrap{display:grid;color:var(--brand-accent);min-height:1.3em;}
.uim-typing-wrap > *,.uim-typing-ukur > *{grid-area:1/1;}
.uim-typing-ukur{display:grid;visibility:hidden;}
/* Kursor berkedip paling lama 5 × 0,9 s = 4,5 s lalu diam terlihat (WCAG 2.2.2: kedipan > 5 detik harus dapat dihentikan — slide tunggal
   berfrasa tunggal tidak punya tombol jeda); tombol jeda hero (.uim-hero.is-jeda, main.js bagian 2) menghentikannya seketika (tinjauan bug 2026-10-22). */
.uim-typing-cursor{font-weight:300;margin-left:2px;animation:uimBlink .9s step-end 5;}
.uim-typing-ukur .uim-typing-cursor,.uim-hero.is-jeda .uim-typing-cursor{animation:none;}
@keyframes uimBlink{50%{opacity:0;}}
.uim-hero-sub{font-size:1.1rem;color:rgba(255,255,255,.9);max-width:60ch;margin-bottom:1.75rem;overflow-wrap:anywhere;}
.uim-hero .btn-outline-light{--bs-btn-hover-color:var(--brand-dark);}
/* Elemen kecil di atas FOTO slide (KP-57, tinjauan): latar gelap pada elemen itu sendiri — bukan lapisan di atas foto — agar tetap terbaca
   di foto terang (langit, dinding putih). Tombol garis putih: teks #f8f9fa di atas hitam 60 % ≥ 5,4:1 pada kasus terburuk (foto putih);
   eyebrow: latar padat --brand-dark sehingga --brand-accent-text (dihitung tema.php terhadap warna sekunder) selalu ≥ 4,5:1.
   Hero statis (tanpa .uim-hero-slide) sudah berlatar --brand-dark dan tidak terpengaruh. */
.uim-hero-slide .btn-outline-light{--bs-btn-bg:rgba(0,0,0,.6);--bs-btn-border-color:rgba(255,255,255,.75);}
.uim-hero-slide .uim-hero-eyebrow{background:var(--brand-dark);backdrop-filter:none;-webkit-backdrop-filter:none;}
/* panah, titik, tombol jeda: tombol kaca GELAP (hitam 55 % + blur, garis putih 70 %) — ikon putih ≥ 4,8:1 di atas foto putih.
   ≥ 768 px .uim-hero-kontrol tidak diposisikan (static) sehingga tombol-tombolnya absolut terhadap .uim-hero: panah di tengah tinggi FOTO
   (50 % + separuh padding header), jeda kiri bawah, titik tengah bawah; < 768 px .uim-hero-kontrol menjadi satu baris di dasar hero (bawah). */
.uim-hero-arrow{position:absolute;top:calc(50% + var(--header-h) / 2);transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.7);background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;display:grid;place-items:center;font-size:1.2rem;
  transition:background var(--t);}
.uim-hero-arrow:hover,.uim-hero-arrow:focus-visible{background:var(--brand-primary);}
.uim-hero-arrow--prev{left:1rem;}.uim-hero-arrow--next{right:1rem;}
/* Strip titik selebar hero TIDAK menangkap klik (pointer-events:none; hanya .uim-hero-dot yang aktif) — tanpa ini strip transparan
   setinggi 24 px menutupi bagian bawah tombol jeda & tombol CTA yang jatuh di pita bawah (tinjauan ke-3 KP-57). */
.uim-hero-dots{position:absolute;bottom:.6rem;left:0;right:0;display:flex;justify-content:center;gap:.35rem;z-index:3;pointer-events:none;}
/* Titik navigasi: tombol setinggi 24px (area sentuh) dengan batang 5px di tengahnya (::before) — batang putih 90 % bercincin gelap
   1 px sehingga terlihat di foto terang maupun gelap (titik aktif tetap aksen, cincin ikut) */
.uim-hero-dot{position:relative;width:28px;height:24px;border:0;border-radius:3px;background:transparent;padding:0;transition:width var(--t);pointer-events:auto;}
.uim-hero-dot::before{content:"";position:absolute;left:0;right:0;top:50%;height:5px;margin-top:-2.5px;border-radius:3px;background:rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(0,0,0,.6);transition:background var(--t);}
.uim-hero-dot.is-active{width:40px;}
.uim-hero-dot.is-active::before{background:var(--brand-accent);}
/* Tombol jeda/putar autoplay (hero.php [data-hero-pause]; main.js mengganti ikon & aria-pressed). Di KIRI bawah: kanan bawah layar
   dipakai tombol mengambang "Kontak" (.uim-kontak-fab, fixed) yang dapat menutupinya saat hero setinggi layar (ponsel, zoom browser). */
.uim-hero-pause{position:absolute;left:1rem;bottom:.6rem;z-index:3;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.7);
  background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;display:grid;place-items:center;font-size:.95rem;padding:0;transition:background var(--t);}
.uim-hero-pause:hover,.uim-hero-pause:focus-visible{background:var(--brand-primary);}
/* KP-65: hero yang lebih tinggi dari layar (foto 3:2/4:3 selebar layar, atau 16:9 di laptop 16:9 karena header 72 px) — titik & tombol jeda
   tidak boleh ikut ke bawah layar pertama: bottom = jarak dasar hero ke dasar layar pertama (100 % tinggi hero − tinggi layar) + .6rem, minimal
   .6rem (hero lebih pendek dari layar → di dasar hero seperti biasa). Hanya ≥ 768 px (ponsel: baris kontrol di bawah teks). Cadangan 100vh
   berdiri sendiri, svh di @supports (pola tinjauan KP-60: deklarasi ber-var()/svh menggantikan cadangan di browser lama). */
@media (min-width:768px){.uim-hero-dots,.uim-hero-pause{bottom:max(.6rem,calc(100% - 100vh + .6rem));}}
@supports (height:100svh){@media (min-width:768px){.uim-hero-dots,.uim-hero-pause{bottom:max(.6rem,calc(100% - 100svh + .6rem));}}}
/* Hero statis: dipakai hero.php saat unit belum punya slide aktif (tabel slider kosong / semua aktif=0).
   Satu warna polos --brand-dark tanpa cahaya radial, pola kisi, atau blob (KP-57: "jangan ada lapisan warna lain"). */
.uim-hero--statis{min-height:auto;background:var(--brand-dark);}
.uim-hero--statis .uim-hero-content{padding-top:3.25rem;padding-bottom:3.25rem;}
.uim-hero-logo{width:160px;height:160px;object-fit:contain;background:#fff;border-radius:50%;padding:8px;
  box-shadow:0 0 0 10px rgba(255,255,255,.1),0 20px 50px rgba(0,0,0,.35);} /* cincin kaca + bayangan dalam */
@media (max-width:767.98px){
  .uim-hero{min-height:clamp(600px,80vh,760px);} /* hero statis (MODE B); hero berfoto menimpanya dengan .uim-hero.uim-hero--foto{min-height:0} */
  .uim-hero-arrow{width:38px;height:38px;}
  .uim-hero-title{font-size:clamp(1.6rem,7vw,2.2rem);}
  .uim-hero-logo{width:110px;height:110px;}
  /* KP-60: foto selebar layar setinggi rasionya (±220–260 px) TIDAK cukup untuk teks → teks di BAWAH foto (latar --brand-dark hero), foto
     tetap bersih & utuh. Ruang bawah 4rem = baris kontrol — hanya bila kontrol dicetak
     (.uim-hero--kontrol; tinjauan KP-60: beranda bersatu slide tanpa teks ketik berganti dulu menyisakan pita kosong 64 px). Teks di bawah
     foto selalu di atas --brand-dark (kontras terjamin). KP-65: tinggi trek = slide aktif (slide lain absolut) juga di sini. */
  .uim-hero-slide{display:flex;flex-direction:column;align-items:stretch;}
  .uim-hero-track{align-items:start;}
  .uim-hero-slide .uim-hero-content{padding:1.25rem 1rem 2.5rem;}
  .uim-hero--kontrol .uim-hero-slide .uim-hero-content{padding-bottom:4rem;}
  /* KP-66: slide tanpa teks (.uim-hero-slide--polos, tanpa .uim-hero-content) — sisakan ruang baris kontrol (38 px + .6rem atas/bawah) di bawah
     foto/video agar panah & titik tidak menutupi bagian bawahnya (≥ 768 px kontrol melayang di atas foto seperti biasa) */
  .uim-hero--kontrol .uim-hero-slide--polos{padding-bottom:calc(.6rem + 38px + .6rem);}
  /* Baris kontrol di dasar hero: jeda tetap di KIRI, panah mengapit titik RATA KIRI tepat sesudah slot jeda; sisi KANAN dikosongkan untuk
     tombol mengambang "Kontak" (fixed kanan-bawah, KP-57) — tinjauan bug 2026-10-22: dulu deretan di tengah dengan cadangan kanan hanya
     selebar slot jeda sehingga panah "berikutnya" tertutup tombol Kontak bila slide ≥ 4–5. Strip baris tidak menangkap klik (pointer-events:
     none), hanya tombolnya. Padding kiri = slot tombol jeda (absolut); padding kanan = jejak tombol Kontak (< 576 px ikon saja 52 px di 1rem
     dari tepi; 576–767 px berteks ±125 px di 1.25rem); titik dapat menyusut (min 12 px) bila slide banyak (tinjauan KP-60). */
  .uim-hero-kontrol{position:absolute;left:0;right:0;bottom:.6rem;height:38px;display:flex;align-items:center;justify-content:flex-start;gap:.5rem;z-index:3;pointer-events:none;
    padding:0 calc(1.25rem + 8rem + .5rem) 0 calc(.6rem + 32px + .5rem);}
  .uim-hero-kontrol button{pointer-events:auto;}
  .uim-hero-kontrol .uim-hero-arrow{position:static;transform:none;flex:0 0 auto;}
  .uim-hero-kontrol .uim-hero-dots{position:static;min-width:0;flex:0 1 auto;}
  /* lebar tetap dari aturan dasar (28 / 40 px) = ukuran wajar; flex-shrink menyusutkannya (min 12 px) HANYA bila ruang kurang.
     Jangan width:auto: tombol kosong tidak punya lebar intrinsik sehingga titik langsung menyusut ke 12 px */
  .uim-hero-kontrol .uim-hero-dot{flex:0 1 auto;min-width:12px;}
  .uim-hero-pause{left:.6rem;bottom:3px;}
}
@media (max-width:575.98px){.uim-hero-kontrol{padding-right:calc(1rem + 52px + .5rem);}} /* tombol Kontak ikon saja (52 px, 1rem dari tepi) */

/* Hero beranda HALAMAN RS (hero.php MODE D, #heroWahana — KP-58): kelas hero yang sama (foto tanpa lapisan + elemen berlatar gelap sendiri,
   atau warna polos + logo). Berfoto = .uim-hero--foto dengan satu slide statis (KP-60/KP-65: foto utuh selebar hero setinggi rasionya, tanpa
   latar buram; teks di atas foto ≥ 768 px dan di bawah foto di ponsel sehingga tagline panjang tidak terpotong); isinya sejajar kontainer
   halaman (tanpa ruang panah).
   Pil jenis (--putih) di atas foto diberi latar gelap seperti tombol garis putih. */
.uim-hero--wahana{min-height:clamp(420px,62vh,640px);} /* RS tanpa foto; RS berfoto ditimpa .uim-hero.uim-hero--foto{min-height:0} */
.uim-hero--statis.uim-hero--wahana{min-height:auto;}
/* .uim-hero-isi (BUKAN .uim-hero-content: aturan slider — lebar 860 px rata kiri + ruang panah — tidak berlaku) = .container biasa yang
   sejajar navbar; teksnya dibatasi .uim-hero-isi-teks */
.uim-hero-isi{position:relative;z-index:2;padding-top:2.5rem;padding-bottom:3rem;}
.uim-hero-isi-teks{max-width:860px;}
.uim-hero-slide .uim-pill--putih{background:rgba(0,0,0,.6);border-color:rgba(255,255,255,.7);}
/* RS tanpa foto & logo: ikon rumah sakit di lingkaran putih .uim-hero-logo (ikon --brand-primary, kontras ≥ 3:1 untuk grafis) */
.uim-hero-logo--ikon{display:inline-grid;place-items:center;font-size:4.2rem;color:var(--brand-primary);}
@media (max-width:767.98px){
  .uim-hero--wahana{min-height:460px;}
  .uim-hero-isi{padding-bottom:2.5rem;}
  .uim-hero--foto .uim-hero-isi{padding-top:1.25rem;} /* teks di bawah foto (KP-60) */
  .uim-hero-logo--ikon{font-size:2.9rem;}
}

/* ---- Pita judul halaman selain beranda (.uim-page-band, hero.php mode band) ----
   Dipakai tentang / akademik / link-terkait / berita / kontak / 404: latar --brand-dark, padding atas =
   tinggi header + 2.25rem (header fixed), eyebrow nama unit, h1 judul halaman, .uim-page-band-sub subjudul. */
.uim-page-band{position:relative;overflow:hidden;isolation:isolate;color:#fff;padding:calc(var(--header-h) + 2.75rem) 0 2.75rem;
  background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/56px 56px,
             radial-gradient(circle at 90% 10%,rgba(var(--brand-primary-rgb),.6),transparent 45%),
             linear-gradient(160deg,var(--brand-dark),var(--brand-darker));}
/* blob aksen berpendar di kanan atas (di bawah .container z-index 1) */
.uim-page-band::before{content:"";position:absolute;z-index:0;pointer-events:none;width:min(50vw,520px);aspect-ratio:1;right:-10%;top:-60%;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--brand-accent-rgb),.38),transparent 62%);filter:blur(44px);animation:uimFloat 20s ease-in-out infinite alternate;}
.uim-page-band .container{position:relative;z-index:1;}
.uim-page-band h1{color:#fff;font-size:clamp(1.7rem,3.2vw,2.6rem);letter-spacing:-.02em;margin-bottom:.35rem;}
.uim-page-band .uim-hero-eyebrow{margin-bottom:.5rem;}
.uim-page-band-sub{color:rgba(255,255,255,.85);max-width:70ch;margin:0;}

/* =====================================================================
   BREADCRUMB BAR (partials/layout/breadcrumb.php)
   Bar putih di bawah hero/page band: "Universitas Imelda Medan › Fakultas … › Prodi … › Halaman" dari jejak unit.
   Pemisah '›' lewat --bs-breadcrumb-divider. Jejak MELIPAT ke baris berikutnya di SEMUA lebar layar (tinjauan bug 2026-10-22: dulu ≥ 576 px
   satu baris ber-scroll tersembunyi sehingga butir halaman aktif jejak panjang — prodi › Tentang › …, halaman RS dalam konteks prodi — berada
   di luar layar tanpa elipsis/scrollbar). Semua pemisah --muted (≥ 4,5:1; dulu #9FB3AF ±2,2:1 dan aturan pemisah butir aktif tertimpa).
   ===================================================================== */
.uim-breadcrumb{background:rgba(255,255,255,.66);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.7);
  box-shadow:0 1px 0 rgba(var(--brand-dark-rgb),.06);padding:.7rem 0;font-size:.84rem;} /* bar kaca */
.uim-breadcrumb .breadcrumb{flex-wrap:wrap;row-gap:.2rem;--bs-breadcrumb-divider:'›';--bs-breadcrumb-item-padding-x:.6rem;}
.uim-breadcrumb .breadcrumb-item a{color:var(--muted);}
.uim-breadcrumb .breadcrumb-item a:hover{color:var(--brand-primary);}
.uim-breadcrumb .breadcrumb-item.active{color:var(--brand-dark);font-weight:600;display:inline-flex;align-items:center;gap:.4rem;}
.uim-breadcrumb .breadcrumb-item+.breadcrumb-item::before{color:var(--muted);}
@media (max-width:575.98px){.uim-breadcrumb{font-size:.8rem;}}

/* =====================================================================
   LAYOUT GRID: satu kolom konten selebar .container (KP-57)
   Dulu dua kolom (konten + sidebar kontak lengket 340 px). Sejak KP-57 (permintaan user: "Informasi Kontak bisa di-hide dan dimunculkan
   seperti pop up") kartu kontak menjadi pop-up dari tombol mengambang "Kontak" (partials/layout/kontak_popup.php, dicetak footer.php),
   sehingga konten memakai lebar penuh. Teks naratif tetap nyaman dibaca karena .uim-prose dibatasi 76ch.
   [PANDUAN UPDATE] Ingin kolom samping lagi: tambahkan kolom kedua pada grid-template-columns dan elemen kolomnya di pages/*.php.
   ===================================================================== */
.uim-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.25rem;align-items:start;padding-top:2.5rem;padding-bottom:3.5rem;} /* padding kiri/kanan tetap dari .container (gutter) — .row ber-margin negatif tidak melebihi layar */
@media (max-width:991.98px){.uim-grid{padding-top:1.75rem;}}

/* Seksi konten & judul seksi: .uim-section-title punya batang warna primer di kiri dan garis tipis memanjang ke kanan;
   .uim-section-head = judul + aksi (mis. tombol "Semua berita") dalam satu baris yang melipat di layar sempit */
.uim-section{margin-bottom:2.75rem;}
.uim-section:last-child{margin-bottom:0;}
.uim-section-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1.1rem;}
.uim-section-head .uim-section-title{flex:1 1 auto;}
.uim-section-title{display:flex;align-items:center;gap:.7rem;font-size:1.35rem;margin:0 0 1rem;}
.uim-section-title::before{content:"";width:6px;height:24px;border-radius:999px;background:linear-gradient(180deg,var(--brand-primary),var(--brand-accent));flex:0 0 6px;
  box-shadow:0 0 12px rgba(var(--brand-primary-rgb),.35);} /* batang gradien primer → aksen berpendar */
.uim-section-title::after{content:"";flex:1 1 auto;height:1px;background:linear-gradient(90deg,rgba(var(--brand-dark-rgb),.14),transparent);margin-left:.5rem;min-width:24px;}
.uim-section-head .uim-section-title{margin-bottom:0;}

/* ---- Pita angka kunci (partials/layout/stat_strip.php) ----
   Grid auto-fit berisi <dl>: tiap .uim-stat (dt label kecil, dd angka font display) bergaris atas primer;
   .uim-stat--alumni bergaris aksen. dd.uim-stat-kosong = tampilan netral saat data belum ada ("Belum tersedia" —
   jangan pernah diisi angka perkiraan, kebijakan akurasi CLAUDE.md §8). .uim-stat-sumber = baris sumber/cara hitung. */
.uim-stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin:1.1rem 0 .4rem;} /* bento: tiap angka = kartu kaca */
.uim-stat{background:var(--glass,#fff);border:1px solid var(--glass-border,var(--line));border-top:3px solid var(--brand-primary);border-radius:var(--radius-sm);
  padding:.95rem 1.05rem;margin:0;box-shadow:var(--shadow-sm);transition:transform var(--t),box-shadow var(--t);}
.uim-stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.uim-stat--alumni{border-top-color:var(--brand-accent);}
.uim-stat dt{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:.15rem;}
/* angka: teks gradien gelap → primer (background-clip:text; color tetap diset sebagai cadangan) — keduanya ≥ 4,5:1 di atas latar terang
   karena primer sudah diperiksa admin/identitas.php */
.uim-stat dd{font-family:var(--ff-display);font-size:1.7rem;font-weight:800;margin:0;line-height:1.15;letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--brand-dark),var(--brand-primary));-webkit-background-clip:text;background-clip:text;color:var(--brand-dark);-webkit-text-fill-color:transparent;}
.uim-stat dd.uim-stat-kosong{font-family:var(--ff-body);font-size:.92rem;font-weight:600;background:none;color:var(--muted);-webkit-text-fill-color:var(--muted);padding-top:.25rem;}
/* keterangan angka = <dd> KEDUA (bukan <small> di luar pasangan dt/dd — model isi <dl>, tinjauan bug 2026-10-22); gradien teks angka dibatalkan */
.uim-stat dd.uim-stat-ket{display:block;font-family:var(--ff-body);font-size:.72rem;font-weight:400;line-height:1.4;letter-spacing:0;color:var(--muted);
  background:none;-webkit-text-fill-color:var(--muted);margin-top:.25rem;}
.uim-stat-sumber{font-size:.76rem;color:var(--muted);margin:0 0 1.4rem;}
.uim-stat-sumber i{color:var(--brand-primary);}
/* ---- Angka naik (KP-64, permintaan user "data Animated Counter" — tampilan bawaan pita angka kunci) ----
   main.js bagian 11b menghitung angka <dd> di <dl class="uim-stat-strip" data-stat-hitung> dari 0 ke nilainya saat pita terlihat:
   <dd.uim-stat-hitung> > span.uim-hitung (aria-hidden; angka yang berubah — tabular-nums agar lebar kartu tidak bergetar) + salinan nilai
   akhir .visually-hidden (pembaca layar); dd.is-selesai sesudah selesai. Tanpa JS / prefers-reduced-motion → angka akhir dari server. */
.uim-hitung{font-variant-numeric:tabular-nums;}
/* ---- Angka berjalan (KP-62, OPSIONAL sejak KP-64): pita angka kunci sebagai TEKS BERJALAN ----
   Permintaan user "buat angka yang fakultas prodi dan lainnya pakai huruf berjalan"; sejak KP-64 tampilan bawaan = angka naik di atas, pita
   berjalan aktif kembali bila atribut data-stat-jalan dipasang. main.js bagian 11 membangun, tepat di bawah
   <dl class="uim-stat-strip" data-stat-jalan>, wadah .uim-jalan-wadah = tombol jeda .uim-jalan-jeda (WCAG 2.2.2) + .uim-jalan
   (aria-hidden, tepi memudar) > .uim-jalan-track berisi dua paruh identik (.uim-jalan-set diulang) → animasi uimJalan translateX
   0 → -50% berputar mulus; durasinya diset JS (kecepatan tetap). <dl> diberi .uim-stat-strip--jalan = tersembunyi secara VISUAL
   (tetap dibaca pembaca layar). Semua ini HANYA di layar dengan gerak diizinkan — prefers-reduced-motion, cetak, dan tanpa JS
   menampilkan kisi kartu .uim-stat di atas. Berhenti saat kursor di atas pita, saat dijeda tombol (.is-jeda), dan saat di luar layar
   (.is-luar). Butir: angka bergradien seperti .uim-stat dd + LABEL; nilai teks (jenjang,
   akreditasi, "Data sedang dimutakhirkan") ditulis sesudah labelnya (.uim-jalan-item--teks / --kosong); pemisah ✦ primer pudar = hiasan.
   [PANDUAN UPDATE] Tinggi pita, ukuran angka, dan pemisah diatur di sini; kecepatan & teks tombol di main.js bagian 11. Mengaktifkan
   teks berjalan: ganti data-stat-hitung menjadi data-stat-jalan di partials/layout/stat_strip.php dan pages/wahana_rs.php. */
.uim-jalan-wadah{display:none;align-items:center;gap:.5rem;margin:1.1rem 0 .4rem;padding:.3rem .4rem;background:var(--glass,#fff);
  border:1px solid var(--glass-border,var(--line));border-radius:999px;box-shadow:var(--shadow-sm);}
@media screen and (prefers-reduced-motion:no-preference){
  .uim-jalan-wadah{display:flex;}
  .uim-stat-strip--jalan{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
    overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
}
.uim-jalan{flex:1 1 auto;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2rem,#000 calc(100% - 2rem),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 2rem,#000 calc(100% - 2rem),transparent);}
.uim-jalan-track{display:flex;width:max-content;animation:uimJalan 30s linear infinite;will-change:transform;}
/* Berhenti: kursor di atas pita, dijeda tombol (.is-jeda), atau di luar layar (.is-luar). TANPA :focus-within — satu-satunya isi yang dapat
   difokus adalah tombol jeda itu sendiri, sehingga "Putar" yang masih terfokus tetap membekukan pita (tinjauan bug 2026-10-22). */
.uim-jalan:hover .uim-jalan-track,.uim-jalan-wadah.is-jeda .uim-jalan-track,.uim-jalan-wadah.is-luar .uim-jalan-track{animation-play-state:paused;}
.uim-jalan-set{display:flex;flex:none;align-items:center;}
.uim-jalan-item{display:inline-flex;align-items:baseline;gap:.5rem;white-space:nowrap;padding:.3rem 0;}
.uim-jalan-nilai{font-family:var(--ff-display);font-size:1.45rem;font-weight:800;line-height:1.15;letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--brand-dark),var(--brand-primary));-webkit-background-clip:text;background-clip:text;
  color:var(--brand-dark);-webkit-text-fill-color:transparent;}
.uim-jalan-label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted);}
.uim-jalan-item--teks .uim-jalan-nilai{font-size:1.1rem;} /* nilai berupa teks (jenjang, akreditasi) sedikit lebih kecil daripada angka */
.uim-jalan-item--kosong .uim-jalan-nilai{font-family:var(--ff-body);font-size:.92rem;font-weight:600;background:none;color:var(--muted);
  -webkit-text-fill-color:var(--muted);}
.uim-jalan-ket{font-size:.72rem;color:var(--muted);}
.uim-jalan-pisah{flex:none;margin:0 1.1rem;color:rgba(var(--brand-primary-rgb),.55);font-size:.85rem;line-height:1;} /* primer pudar: aksen emas universitas nyaris tak terlihat di latar terang */
.uim-jalan-jeda{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(var(--brand-primary-rgb),.35);background:#fff;
  color:var(--brand-primary);display:grid;place-items:center;font-size:.95rem;padding:0;transition:background var(--t),color var(--t);}
.uim-jalan-jeda:hover{background:var(--brand-primary);color:#fff;}
@keyframes uimJalan{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
/* Hiasan beranda (pages/beranda.php): tiga batang warna primer / gelap / aksen di bawah judul unit (.uim-judul-unit) */
.uim-accent-bars{display:flex;gap:5px;margin:.6rem 0 1rem;}
.uim-accent-bars span{height:4px;border-radius:3px;display:block;}
.uim-accent-bars span:nth-child(1){width:34px;background:var(--brand-primary);}
.uim-accent-bars span:nth-child(2){width:18px;background:var(--brand-dark);}
.uim-accent-bars span:nth-child(3){width:14px;background:var(--brand-accent);}
.uim-judul-unit{font-size:clamp(1.7rem,3.2vw,2.3rem);margin:.25rem 0 0;}
/* Teks naratif dari unit_konten (hasil nl2p() / nl2ol()): .uim-prose (+ .uim-prose-lg lebih besar), lebar baca maks 76ch.
   .uim-empty = kotak putus-putus "Konten belum tersedia." .uim-subnav = pil navigasi sub-halaman Tentang (pages/tentang.php). */
.uim-prose{font-size:1rem;line-height:1.75;color:#2F413D;max-width:76ch;overflow-wrap:break-word;} /* URL/kata panjang tanpa spasi tidak meluber di 360 px */
/* Narasi rata kiri-kanan (permintaan user, KP-52): hanya blok teks panjang (paragraf & butir daftar prosa, isi berita, ringkasan kartu,
   keterangan portal/brosur); judul, label, tombol, menu, alamat kontak (ul.list-unstyled) tetap rata kiri. hyphens:auto membantu
   mengurangi celah antar-kata pada browser yang punya kamus pemenggalan. */
.uim-prose p,.uim-prose ol li,.uim-prose ul li,.uim-berita-isi p,.uim-berita-isi ol li,.uim-berita-isi ul li,.uim-card-berita-ringkas,.uim-tautan-card p.uim-tautan-ket,.uim-brosur-ket,.uim-wahana-ket,.uim-fasilitas-ket{
  text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto;}
/* Teks kaya (KP-52, teks_kaya_html()): subjudul "## ", daftar "- ", kutipan "> " di dalam .uim-prose / .uim-berita-isi; sub-butir bersarang (KP-54) */
.uim-prose ul,.uim-berita-isi ul,.uim-berita-isi ol{padding-left:1.35rem;margin-bottom:1rem;}
.uim-berita-isi li{margin-bottom:.45rem;}
.uim-prose li > ul,.uim-prose li > ol,.uim-berita-isi li > ul,.uim-berita-isi li > ol{margin:.35rem 0 0;padding-left:1.25rem;} /* sub-butir rapat ke butir induknya */
.uim-prose li li,.uim-berita-isi li li{margin-bottom:.3rem;}
.uim-subjudul{font-size:1.2rem;margin:1.6rem 0 .6rem;color:var(--brand-dark);}
.uim-berita-isi h2.uim-subjudul{font-size:1.35rem;}
.uim-subjudul:first-child{margin-top:0;}
.uim-kutipan{margin:1.1rem 0;padding:.9rem 1.2rem;border-left:4px solid var(--brand-accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:rgba(var(--brand-primary-rgb),.06);font-style:italic;color:var(--ink);}
.uim-prose p{margin-bottom:1rem;}
.uim-prose ol,.uim-prose ul{padding-left:1.35rem;}
.uim-prose li{margin-bottom:.55rem;}
.uim-prose-lg{font-size:1.06rem;}
.uim-empty{background:rgba(255,255,255,.7);border:1px dashed rgba(var(--brand-dark-rgb),.18);border-radius:var(--radius);padding:1.25rem 1.4rem;color:var(--muted);display:flex;gap:.75rem;align-items:flex-start;}
.uim-empty i{font-size:1.3rem;color:var(--brand-primary);}
.uim-subnav{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;}
.uim-subnav a{font-size:.84rem;font-weight:600;padding:.45rem 1rem;border-radius:999px;border:1px solid var(--glass-border,var(--line));background:var(--glass,#fff);color:var(--ink);
  text-decoration:none;box-shadow:var(--shadow-sm);transition:background var(--t),color var(--t),transform var(--t),border-color var(--t);}
.uim-subnav a:hover{border-color:rgba(var(--brand-primary-rgb),.5);color:var(--brand-primary);transform:translateY(-2px);}
.uim-subnav a.is-active{background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-hover));border-color:transparent;color:#fff;box-shadow:0 8px 20px rgba(var(--brand-primary-rgb),.3);}

/* =====================================================================
   POP-UP INFORMASI KONTAK (partials/layout/kontak_popup.php, dicetak footer.php; perilaku main.js bagian 8 — KP-57)
   .uim-kontak-fab = tombol mengambang kanan-bawah (ikon headset + teks "Kontak"; < 576 px hanya ikon, teks tetap terbaca pembaca layar)
   yang membuka/menutup .uim-kontak-panel (dialog non-modal, TANPA lapisan gelap di belakangnya) berisi .uim-kontak-card.
   Tutup: tombol X, Escape, klik di luar panel, atau klik tombol Kontak lagi. Tombol ke atas (#btnKeAtas) naik ke atas tombol Kontak.
   .uim-kontak-card latar --brand-dark bergaris atas aksen; tiap .uim-kontak-item = label kecil aksen (.uim-kontak-label)
   + nilai (.uim-kontak-value: alamat, email, telepon, WhatsApp, jam layanan dari unit efektif/warisan).
   .uim-kontak-kosong = nilai belum diisi; .uim-sosmed = ikon bulat FB/IG/YT; tombol "Hubungi Kami" lebar penuh.
   [PANDUAN UPDATE] Posisi/ukuran tombol (52 px, 1.25rem dari tepi) dipakai di empat aturan: .uim-kontak-fab, .uim-kontak-panel (bottom),
   .uim-kontak-pop ~ .uim-scroll-top, dan ruang cadangan .uim-footer--fab (blok FOOTER) — ubah bersamaan. Tombol jeda hero sengaja di
   kiri bawah agar tidak tertutup tombol ini. Ikon tombol diganti di kontak_popup.php.
   ===================================================================== */
.uim-kontak-fab{position:fixed;right:1.25rem;bottom:1.25rem;z-index:1025;display:inline-flex;align-items:center;gap:.5rem;height:52px;
  padding:0 1.25rem 0 1.05rem;border:0;border-radius:999px;color:#fff;font-weight:700;font-size:.9rem;letter-spacing:.02em;line-height:1;
  background:var(--brand-primary);box-shadow:0 10px 26px rgba(var(--brand-dark-rgb),.35);transition:background var(--t),transform var(--t);}
.uim-kontak-fab i{font-size:1.3rem;line-height:1;}
.uim-kontak-fab:hover{background:var(--brand-primary-hover);color:#fff;transform:translateY(-2px);}
.uim-kontak-fab.is-open{background:var(--brand-dark);}
.uim-kontak-panel{position:fixed;right:1.25rem;bottom:calc(1.25rem + 52px + .75rem);z-index:1026;width:min(360px,calc(100vw - 2.5rem));
  max-height:calc(100vh - var(--header-h) - 52px - 3.25rem);
  overflow-y:auto;overscroll-behavior:contain;border-radius:var(--radius);opacity:0;transform:translateY(12px);transition:opacity var(--t),transform var(--t);}
@supports (height:100dvh){.uim-kontak-panel{max-height:calc(100dvh - var(--header-h) - 52px - 3.25rem);}} /* dvh di @supports — lihat panel menu */
.uim-kontak-panel[hidden]{display:none;}
.uim-kontak-panel.is-open{opacity:1;transform:none;}
.uim-kontak-panel .uim-kontak-card{box-shadow:0 24px 60px rgba(var(--brand-dark-rgb),.4);}
.uim-kontak-kepala{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;border-bottom:1px solid rgba(255,255,255,.14);
  padding-bottom:.8rem;margin-bottom:1.1rem;}
.uim-kontak-card .uim-kontak-kepala h2{border:0;padding:0;margin:0;}
.uim-kontak-kepala h2:focus{outline:none;} /* judul menerima fokus terprogram saat panel dibuka (main.js bagian 8) agar dibacakan; bukan kontrol → tanpa cincin */
.uim-kontak-tutup{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);
  color:#fff;display:grid;place-items:center;font-size:.9rem;padding:0;transition:background var(--t);}
.uim-kontak-tutup:hover{background:rgba(255,255,255,.2);}
.uim-kontak-pop ~ .uim-scroll-top{bottom:calc(1.25rem + 52px + .75rem);} /* tombol ke atas berdiri di atas tombol Kontak */
@media (max-width:575.98px){
  .uim-kontak-fab{width:52px;padding:0;justify-content:center;}
  .uim-kontak-fab-teks{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  .uim-kontak-fab,.uim-kontak-panel{right:1rem;}
  .uim-kontak-panel{width:calc(100vw - 2rem);}
}
.uim-kontak-card{position:relative;overflow:hidden;color:#fff;border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-md);
  background:radial-gradient(circle at 100% 0%,rgba(var(--brand-primary-rgb),.55),transparent 55%),linear-gradient(160deg,var(--brand-dark),var(--brand-darker));
  border:1px solid rgba(255,255,255,.14);border-top:4px solid var(--brand-accent);} /* kartu gelap bergradien + glow primer di sudut */
.uim-kontak-card h2{font-size:1.05rem;color:#fff;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:.8rem;margin-bottom:1.1rem;display:flex;align-items:center;gap:.5rem;}
.uim-kontak-card h2 i{color:var(--brand-accent);}
.uim-kontak-item{margin-bottom:1.05rem;}
.uim-kontak-label{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-accent-text,var(--brand-accent));margin-bottom:.2rem;}
.uim-kontak-value{font-size:.86rem;color:rgba(255,255,255,.9);line-height:1.55;}
.uim-kontak-value a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
.uim-kontak-value a:hover{color:var(--brand-accent-text,var(--brand-accent));}
.uim-kontak-value i{color:var(--brand-accent);margin-right:.3rem;}
.uim-kontak-kosong{color:rgba(255,255,255,.85);font-style:italic;}
.uim-kontak-card .btn{width:100%;margin-top:.25rem;}
.uim-kontak-catatan{font-size:.74rem;color:rgba(255,255,255,.85);margin:.75rem 0 0;text-align:center;}
.uim-sosmed{display:flex;gap:.5rem;}
.uim-sosmed a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;display:inline-grid;place-items:center;font-size:1rem;text-decoration:none;transition:background var(--t);}
.uim-sosmed a:hover{background:var(--brand-primary);color:#fff;}

/* =====================================================================
   KARTU (unit, prodi, berita, tautan)
   .uim-card = kulit dasar putih bergaris (hover: garis primer + bayangan). Turunannya:
     .uim-card-unit    kartu fakultas (logo bulat + nama + panah) di beranda/akademik universitas
     .uim-card-prodi   kartu prodi latar --brand-dark, garis kiri aksen, pill jenjang/akreditasi (.uim-card-tags)
     .uim-tautan-card  kartu LINK TERKAIT (ikon dalam kotak .uim-tautan-ikon + label + URL kecil)
     .uim-dok-list     daftar dokumen akademik (tautan GDrive) di akademik / beranda prodi / detail berita
     .uim-card-berita  kartu berita (lihat blok "Kartu berita" di bawah)
   ===================================================================== */
.uim-card{background:var(--glass,#fff);border:1px solid var(--glass-border,var(--line));border-radius:var(--radius);height:100%;box-shadow:var(--shadow-sm);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);} /* kartu kaca; hover terangkat (dimatikan pada prefers-reduced-motion) */
.uim-card:hover{border-color:rgba(var(--brand-primary-rgb),.4);box-shadow:var(--shadow-md);transform:translateY(-4px);}
form.uim-card:hover{transform:none;} /* formulir kontak memakai kulit kartu tetapi tidak perlu "terangkat" */
.uim-card-unit{display:flex;gap:1rem;padding:1.1rem 1.2rem;text-decoration:none;color:var(--ink);align-items:center;height:100%;}
.uim-card-unit img{width:60px;height:60px;border-radius:50%;object-fit:contain;background:#fff;border:1px solid var(--line);flex:0 0 60px;padding:3px;}
.uim-card-unit h3{font-size:1.02rem;margin:0 0 .2rem;}
.uim-card-unit .small{color:var(--muted);}
.uim-card-unit .bi-arrow-right-circle{margin-left:auto;font-size:1.3rem;color:var(--brand-primary);}
.uim-card-prodi{display:flex;flex-direction:column;gap:.55rem;padding:1.2rem 1.3rem;color:#fff;overflow:hidden;
  background:radial-gradient(circle at 100% 0%,rgba(var(--brand-primary-rgb),.5),transparent 55%),linear-gradient(160deg,var(--brand-dark),var(--brand-darker));
  border:1px solid rgba(255,255,255,.12);border-left:5px solid var(--brand-accent);text-decoration:none;position:relative;}
.uim-card-prodi h3{color:#fff;font-size:1.05rem;margin:0;}
.uim-card-prodi .uim-card-tags{display:flex;flex-wrap:wrap;gap:.4rem;}
.uim-card-prodi .uim-card-lanjut{margin-top:auto;font-size:.82rem;font-weight:700;color:var(--brand-accent-text,var(--brand-accent));}
.uim-card-prodi:hover{border-color:rgba(var(--brand-accent-rgb),.5);border-left-color:var(--brand-accent);box-shadow:0 18px 40px rgba(var(--brand-dark-rgb),.35);}
.uim-card-prodi:hover h3{color:#fff;}
.uim-tautan-card{display:flex;align-items:flex-start;gap:.9rem;padding:1rem 1.1rem;text-decoration:none;color:var(--ink);height:100%;}
.uim-tautan-card .uim-tautan-isi{flex:1 1 auto;min-width:0;}
.uim-tautan-card .bi-box-arrow-up-right{margin-top:.2rem;}
.uim-tautan-card i.uim-tautan-ikon{font-size:1.4rem;color:var(--brand-primary);width:46px;height:46px;border-radius:.9rem;
  background:linear-gradient(135deg,rgba(var(--brand-primary-rgb),.14),rgba(var(--brand-accent-rgb),.2));display:grid;place-items:center;flex:0 0 46px;}
.uim-tautan-card strong{display:block;font-size:.95rem;}
.uim-tautan-card .small{color:var(--muted);word-break:break-all;}
/* keterangan portal (tautan.keterangan): HARUS di bawah aturan .small (spesifisitas sama) agar warna/pemenggalan kata tidak tertimpa */
.uim-tautan-card p.uim-tautan-ket{color:var(--ink);opacity:.88;margin-top:.4rem;line-height:1.5;white-space:normal;word-break:normal;overflow-wrap:anywhere;}
.uim-tautan-card .bi-box-arrow-up-right{margin-left:auto;color:var(--muted);}
.uim-tautan-card:hover{color:var(--brand-primary);}
.uim-dok-list{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;}
.uim-dok-list a{display:flex;align-items:center;gap:.8rem;background:var(--glass,#fff);border:1px solid var(--glass-border,var(--line));border-radius:var(--radius-sm);padding:.8rem 1rem;
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);transition:border-color var(--t),color var(--t),transform var(--t);}
.uim-dok-list a:hover{border-color:rgba(var(--brand-primary-rgb),.5);color:var(--brand-primary);transform:translateX(4px);}
.uim-dok-list a i:first-child{font-size:1.25rem;color:var(--brand-primary);}
.uim-dok-list a .bi-box-arrow-up-right{margin-left:auto;color:var(--muted);font-size:.9rem;}

/* ---- Foto UTUH di kotak berasio tetap (KP-61, keluhan user 2026-10-22 "gambarnya terpotong… update supaya lebih baik") ----
   Markup dari gambar_utuh_html() (partials/gdrive.php): pembungkus .uim-media-utuh (kartu berita 16:9, wahana 16:9, fasilitas 4:3, galeri 4:3,
   pimpinan 3:4, foto utama detail berita) berisi .uim-media-latar (foto yang SAMA, diburamkan, aria-hidden) dan .uim-media-foto (foto utuh,
   object-fit:contain). Dulu object-fit:cover memotong foto yang rasionya tidak sama dengan kotak (kepala orang, teks poster). Tidak ada
   lapisan warna di atas foto; latar buram hanya mengisi sisa kotak. Hover "zoom" kartu tetap pada .uim-media-foto (dimatikan reduced-motion).
   [PANDUAN UPDATE] Kekuatan buram & kecerahan latar = filter di bawah; rasio kotak per komponen ada di aturan komponennya. */
.uim-media-utuh{position:relative;overflow:hidden;isolation:isolate;background:var(--mist);}
.uim-media-utuh > .uim-media-latar{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:blur(16px) saturate(1.1) brightness(.92);
  transform:scale(1.15);pointer-events:none;}
.uim-media-utuh > .uim-media-foto{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;}

/* ---- Brosur (pages/brosur.php & seksi Brosur beranda; markup partials/layout/kartu_brosur.php; KP-43) ----
   .uim-brosur = kartu: area sisi (.uim-brosur-sisi, rasio 3:4) berisi gambar DEPAN dan (bila ada) BELAKANG yang ditumpuk;
   tombol [data-brosur-balik] (main.js bagian 7) menambah .is-balik pada kartu → sisi belakang tampil (transisi opacity,
   dimatikan oleh prefers-reduced-motion). Tautan gambar membuka ukuran penuh di tab baru (unggahan lokal: atribut download).
   Tanpa gambar (hanya tautan dokumen) → .uim-brosur-dok (ikon PDF). Tombol: balik sisi, unduh depan/belakang, buka/unduh dokumen. */
.uim-brosur{display:flex;flex-direction:column;overflow:hidden;}
.uim-brosur-sisi{position:relative;aspect-ratio:3/4;background:var(--mist);border-bottom:1px solid var(--line);}
.uim-brosur-sisi a{position:absolute;inset:0;display:block;transition:opacity .25s ease,visibility 0s;}
.uim-brosur-sisi a:focus-visible{outline-offset:-4px;} /* cincin fokus digambar di dalam area gambar (kartu overflow:hidden) */
.uim-brosur-sisi img{width:100%;height:100%;object-fit:contain;display:block;}
/* sisi nonaktif: opacity 0 + visibility hidden (keluar dari urutan Tab & pembaca layar). Saat MENYEMBUNYIKAN, visibility
   ditunda .25s agar fade terlihat; saat MENAMPILKAN, visibility langsung visible (transisi 0s) */
.uim-brosur-sisi .uim-brosur-belakang{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s .25s;}
.uim-brosur.is-balik .uim-brosur-belakang{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .25s ease,visibility 0s;}
.uim-brosur.is-balik .uim-brosur-depan{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s .25s;}
.uim-brosur-label{position:absolute;left:.6rem;top:.6rem;z-index:2;background:rgba(18,33,30,.82);color:#fff;border:1px solid transparent;} /* pill gelap: terbaca di atas gambar/latar terang */
.uim-brosur-dok{aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;background:var(--mist);color:var(--brand-primary);font-size:3.4rem;border-bottom:1px solid var(--line);}
.uim-brosur-dok span{font-size:.85rem;color:var(--muted);font-weight:600;letter-spacing:.02em;}
.uim-brosur .card-body{padding:1rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;flex:1 1 auto;}
.uim-brosur h3{font-size:1.05rem;margin:0;line-height:1.35;}
.uim-brosur-ket{font-size:.9rem;color:#4F635F;margin:0;}
.uim-brosur-aksi{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.35rem;}

/* ---- Wahana pendidikan, pimpinan, sarana & prasarana (KP-55) ----
   .uim-wahana   = kartu wahana (partials/layout/kartu_wahana.php): media 16:9 (foto; logo → contain; tanpa gambar → ikon), pill jenis/utama/unit,
                   nama bertautan ke detail, keterangan, tombol. .uim-wahana--utama = wahana pendidikan utama di kolom lebar penuh (pages/wahana.php):
                   ≥ md dua kolom (media kiri, teks kanan) + bingkai aksen. .uim-wahana-kepala / .uim-wahana-info = halaman detail.
   .uim-pimpinan = kartu pimpinan (pages/tentang.php bagian pimpinan): foto 3:4 utuh + latar buram (KP-61), nama, jabatan, keterangan, tombol tautan.
   .uim-fasilitas = kartu fasilitas (partials/layout/kartu_fasilitas.php): foto 4:3 utuh + latar buram (KP-61; klik → ukuran penuh), pill kategori/unit,
                   nama, info, keterangan. */
.uim-wahana{display:flex;flex-direction:column;overflow:hidden;}
.uim-wahana-media{display:block;aspect-ratio:16/9;background:var(--mist);border-bottom:1px solid var(--line);overflow:hidden;}
/* foto = .uim-media-utuh (KP-61, utuh + latar buram); logo = satu <img> contain berbingkai */
.uim-wahana-media--logo img{width:100%;height:100%;object-fit:contain;padding:1.25rem;display:block;}
.uim-wahana-media--ikon{display:grid;place-items:center;font-size:3rem;color:var(--brand-primary);}
.uim-wahana .card-body{padding:1rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;flex:1 1 auto;}
.uim-wahana h2,.uim-wahana h3,.uim-wahana h4{font-size:1.08rem;margin:0;line-height:1.35;}
.uim-wahana h2 a,.uim-wahana h3 a,.uim-wahana h4 a{color:var(--ink);text-decoration:none;}
.uim-wahana h2 a:hover,.uim-wahana h3 a:hover,.uim-wahana h4 a:hover{color:var(--brand-primary);}
.uim-wahana-ket{font-size:.9rem;color:#4F635F;margin:0;}
.uim-wahana-aksi{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.35rem;}
.uim-wahana--utama{border-color:rgba(var(--brand-accent-rgb),.6);box-shadow:var(--shadow-md);}
@media (min-width:768px){
  .uim-wahana--utama{display:grid;grid-template-columns:1fr 1.4fr;}
  .uim-wahana--utama .uim-wahana-media{aspect-ratio:auto;height:100%;min-height:220px;border-bottom:0;border-right:1px solid var(--line);}
  .uim-wahana--utama .card-body{padding:1.5rem;justify-content:center;}
  .uim-wahana--utama h2,.uim-wahana--utama h3,.uim-wahana--utama h4{font-size:1.35rem;}
}
.uim-wahana-kepala{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;margin-bottom:1.25rem;}
.uim-wahana-kepala img{width:120px;height:120px;object-fit:contain;background:#fff;border-radius:50%;border:1px solid var(--line);padding:8px;box-shadow:var(--shadow-sm);flex:0 0 120px;}
.uim-wahana-kepala>div{flex:1 1 280px;min-width:0;}
.uim-wahana-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem 1.2rem;margin:0;}
.uim-wahana-info div{background:var(--glass,#fff);border:1px solid var(--glass-border,var(--line));border-radius:var(--radius-sm);padding:.75rem .9rem;}
.uim-wahana-info dt{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.15rem;}
.uim-wahana-info dd{margin:0;overflow-wrap:anywhere;}
.uim-pimpinan{display:flex;flex-direction:column;overflow:hidden;text-align:center;}
.uim-pimpinan-foto{aspect-ratio:3/4;background:var(--mist);border-bottom:1px solid var(--line);overflow:hidden;} /* foto: .uim-media-utuh (KP-61) */
.uim-pimpinan-foto--ikon{display:grid;place-items:center;font-size:4rem;color:var(--brand-primary);} /* tanpa foto: ikon dekoratif */
.uim-pimpinan .card-body{padding:1rem 1rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;align-items:center;flex:1 1 auto;}
.uim-pimpinan h3,.uim-pimpinan h4{font-size:1.02rem;margin:0;line-height:1.35;} /* h4: kartu pengurus RS di bawah judul kelompok h3 (KP-58) */
.uim-pimpinan-jabatan{font-size:.86rem;font-weight:700;color:var(--brand-primary);}
.uim-pimpinan-ket{font-size:.84rem;color:var(--muted);margin:0;}
.uim-pimpinan .btn{margin-top:auto;}
.uim-fasilitas{display:flex;flex-direction:column;overflow:hidden;}
.uim-fasilitas-media{display:block;aspect-ratio:4/3;background:var(--mist);border-bottom:1px solid var(--line);overflow:hidden;}
.uim-fasilitas-media:focus-visible{outline-offset:-4px;}
.uim-fasilitas-media .uim-media-foto{transition:transform .5s ease;} /* foto utuh + latar buram (.uim-media-utuh, KP-61) */
.uim-fasilitas:hover .uim-fasilitas-media .uim-media-foto{transform:scale(1.04);}
.uim-fasilitas-media--ikon{display:grid;place-items:center;font-size:3rem;color:var(--brand-primary);}
.uim-fasilitas .card-body{padding:1rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.45rem;flex:1 1 auto;}
.uim-fasilitas-meta{display:flex;flex-wrap:wrap;gap:.35rem;}
.uim-fasilitas h2,.uim-fasilitas h3,.uim-fasilitas h4{font-size:1.05rem;margin:0;line-height:1.35;}
.uim-fasilitas-info{font-size:.84rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.3rem .9rem;}
.uim-fasilitas-info i{color:var(--brand-primary);margin-right:.25rem;}
.uim-fasilitas-ket{font-size:.9rem;color:#4F635F;margin:0;}

/* =====================================================================
   HALAMAN RUMAH SAKIT PENDIDIKAN (pages/wahana_rs.php — KP-58; mini-situs bergaya prodi)
   .uim-subnav--rs      = subnav bagian halaman RS (pola .uim-subnav Tentang); < 768 px satu baris yang digulir mendatar di dalam pitanya
                          sendiri (halaman tidak pernah menggulir mendatar).
   .uim-fasilitas--detail = kartu fasilitas pendidikan (kartu_fasilitas() mode detail): nama bertautan ke halaman detail + tombol.
   .uim-fasilitas-detail-info = panel info di samping foto besar halaman detail fasilitas.
   .uim-galeri / .uim-galeri-item = grid foto (galeri RS & galeri fasilitas): thumbnail 4:3 → ukuran penuh di tab baru + keterangan.
   .uim-cta-rs          = pita promosi (latar --brand-dark seperti kartu kontak; teks putih; eyebrow --brand-accent-text): Daftar Sekarang
                          (PMB efektif), Lihat Brosur, Hubungi Kami.
   .uim-video-rs        = video profil RS (iframe youtube-nocookie dalam .ratio-16x9 Bootstrap).
   .uim-bagikan         = baris "Bagikan" di akhir setiap halaman RS: WhatsApp, Facebook (tab baru), Salin tautan (main.js bagian 9).
   .uim-tautan-rs       = tautan silang dari Sarana & Prasarana kampus ke fasilitas pendidikan RS utama (tautan_fasilitas_rs()).
   [PANDUAN UPDATE] Jumlah kolom galeri: minmax(180px,…) di .uim-galeri; teks pita promosi di pages/wahana_rs.php.
   ===================================================================== */
@media (max-width:767.98px){
  .uim-subnav--rs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;
    margin-left:-.75rem;margin-right:-.75rem;padding:.2rem .75rem .45rem;}
  .uim-subnav--rs a{flex:0 0 auto;white-space:nowrap;}
}
.uim-fasilitas--detail h2 a,.uim-fasilitas--detail h3 a,.uim-fasilitas--detail h4 a{color:var(--ink);text-decoration:none;}
.uim-fasilitas--detail h2 a:hover,.uim-fasilitas--detail h3 a:hover,.uim-fasilitas--detail h4 a:hover{color:var(--brand-primary);}
.uim-fasilitas-detail-info{background:var(--glass,#fff);border:1px solid var(--glass-border,var(--line));border-radius:var(--radius);
  padding:1.25rem 1.35rem;box-shadow:var(--shadow-sm);height:100%;}
.uim-fasilitas-detail-ringkas{color:#4F635F;}
.uim-galeri{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.8rem;}
.uim-galeri-item{margin:0;background:var(--glass,#fff);border:1px solid var(--glass-border,var(--line));border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-sm);}
.uim-galeri-item a{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--mist);}
.uim-galeri-item a:focus-visible{outline-offset:-4px;}
.uim-galeri-item .uim-media-foto{transition:transform .5s ease;} /* thumbnail utuh + latar buram (.uim-media-utuh, KP-61) */
.uim-galeri-item a:hover .uim-media-foto{transform:scale(1.04);}
.uim-galeri-item figcaption{font-size:.82rem;color:var(--muted);padding:.5rem .7rem;}
@media (max-width:575.98px){.uim-galeri{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;}}
.uim-cta-rs{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2rem;
  margin:2.25rem 0;padding:1.8rem 2rem;border-radius:var(--radius-lg,1.6rem);color:#fff;border-top:4px solid var(--brand-accent);box-shadow:var(--shadow-md);
  background:radial-gradient(circle at 100% 0%,rgba(var(--brand-primary-rgb),.55),transparent 55%),linear-gradient(160deg,var(--brand-dark),var(--brand-darker));}
.uim-cta-rs h2{color:#fff;font-size:clamp(1.3rem,2.4vw,1.7rem);margin:0 0 .5rem;}
.uim-cta-rs p{color:rgba(255,255,255,.9);max-width:62ch;}
.uim-cta-rs-eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-accent-text,var(--brand-accent));margin:0 0 .35rem;}
.uim-cta-rs-aksi{display:flex;flex-wrap:wrap;gap:.6rem;}
@media (max-width:575.98px){.uim-cta-rs{padding:1.4rem 1.2rem;}}
.uim-video-rs{max-width:960px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);background:#000;}
.uim-bagikan{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--line);}
.uim-bagikan-label{font-size:.85rem;font-weight:600;color:var(--ink);margin-right:.25rem;}
.uim-bagikan-label i{color:var(--brand-primary);}
.uim-tautan-rs{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:1.25rem;padding:1rem 1.2rem;border-radius:var(--radius);
  background:var(--glass,#fff);border:1px solid var(--glass-border,var(--line));border-left:4px solid var(--brand-primary);box-shadow:var(--shadow-sm);}
.uim-tautan-rs > i{font-size:1.6rem;color:var(--brand-primary);}
.uim-tautan-rs-teks{flex:1 1 16rem;margin:0;}

/* Kartu berita (partials/layout/kartu_berita.php): gambar 16:9 (.uim-card-berita-media), meta pill kategori +
   tanggal + label unit asal (.uim-card-berita-meta), judul h3, ringkasan, "Selengkapnya" (.uim-card-berita-lanjut).
   .uim-card-berita--unggulan = kartu pertama daftar: di ≥768px jadi dua kolom (gambar kiri, teks kanan). */
.uim-card-berita{overflow:hidden;display:flex;flex-direction:column;}
.uim-card-berita-media{display:block;aspect-ratio:16/9;} /* + .uim-media-utuh: foto utuh dalam kotak 16:9, sisa kotak = foto diburamkan (KP-61) */
.uim-card-berita-media .uim-media-foto{transition:transform .5s ease;}
.uim-card-berita:hover .uim-card-berita-media .uim-media-foto{transform:scale(1.04);} /* zoom halus saat hover (dimatikan pada prefers-reduced-motion) */
.uim-card-berita .card-body{padding:1rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;flex:1 1 auto;}
.uim-card-berita-meta{font-size:.8rem;}
.uim-card-berita h3{font-size:1.05rem;margin:0;line-height:1.35;}
.uim-card-berita h3 a{color:var(--ink);text-decoration:none;}
.uim-card-berita h3 a:hover{color:var(--brand-primary);}
.uim-card-berita-ringkas{font-size:.9rem;color:#4F635F;margin:0;}
.uim-card-berita-lanjut{margin-top:auto;font-size:.84rem;font-weight:700;text-decoration:none;color:var(--brand-primary);padding-top:.35rem;}
.uim-card-berita-lanjut:hover{color:var(--brand-dark);}
/* Kartu unggulan dua kolom hanya di ≥ md (768px); di bawah itu tampil seperti kartu biasa */
@media (min-width:768px){
  .uim-card-berita--unggulan{display:grid;grid-template-columns:1.15fr 1fr;}
  .uim-card-berita--unggulan .uim-card-berita-media{aspect-ratio:auto;height:100%;min-height:260px;}
  .uim-card-berita--unggulan .card-body{padding:1.5rem;justify-content:center;}
  .uim-card-berita--unggulan h3{font-size:1.45rem;}
}
/* Halaman detail berita (pages/berita_detail.php): foto utama w1600, baris meta, isi nl2p() lebar baca 76ch;
   .uim-filter-form = form filter kategori + pencarian judul di pages/berita.php */
/* Foto utama berita (KP-61): UTUH dengan rasio aslinya (width/height file lokal; tautan luar → kotak 16:9), paling tinggi ±75 % layar — foto potret
   yang dibatasi tingginya diapit latar foto yang sama diburamkan (.uim-media-utuh). Dulu cover 16:9 maks. 560 px memotong atas/bawah foto. */
.uim-berita-foto{border-radius:var(--radius);box-shadow:var(--shadow-md);}
.uim-berita-foto > .uim-media-foto{height:auto;max-height:min(75vh,640px);}
.uim-berita-foto > .uim-media-foto:not([width]){aspect-ratio:16/9;}
.uim-berita-meta{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;font-size:.86rem;color:var(--muted);align-items:center;}
.uim-berita-meta i{color:var(--brand-primary);margin-right:.3rem;}
.uim-berita-isi{font-size:1.06rem;line-height:1.85;max-width:76ch;overflow-wrap:break-word;} /* tautan otomatis (URL panjang) melipat, tidak meluber */
.uim-berita-isi p{margin-bottom:1.1rem;}
.uim-berita-isi::after{content:"";display:table;clear:both;} /* clearfix: gambar sisipan mengambang tidak menembus seksi berikutnya */
/* ---- Gambar sisipan isi berita (isi_berita_html() → gambar_sisipan_html(), partials/helpers.php) ----
   <figure class="uim-figur uim-figur--<posisi> uim-w-<NN>">: lebar NN% (kelipatan 5, 10–100) dari lebar isi;
   kiri/kanan = mengambang (teks mengalir di sisi lain), tengah = blok di tengah, penuh = 100%.
   <576px semua gambar jadi blok lebar penuh (float dimatikan) agar teks tidak terjepit.
   [PANDUAN UPDATE] Kelas lebar dibuat untuk tiap kelipatan 5 — gambar_sisipan_html() membulatkan ke kelipatan itu. */
.uim-figur{margin:.35rem 0 1.1rem;max-width:100%;}
.uim-figur a{display:block;}
.uim-figur img{width:100%;height:auto;display:block;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--mist);}
.uim-figur figcaption{font-size:.8rem;color:var(--muted);margin-top:.4rem;line-height:1.4;text-align:center;}
.uim-figur--kiri{float:left;margin:.35rem 1.5rem 1rem 0;}
.uim-figur--kanan{float:right;margin:.35rem 0 1rem 1.5rem;}
.uim-figur--tengah{margin-left:auto;margin-right:auto;}
.uim-figur--penuh{width:100%!important;}
.uim-w-10{width:10%;}.uim-w-15{width:15%;}.uim-w-20{width:20%;}.uim-w-25{width:25%;}.uim-w-30{width:30%;}.uim-w-35{width:35%;}
.uim-w-40{width:40%;}.uim-w-45{width:45%;}.uim-w-50{width:50%;}.uim-w-55{width:55%;}.uim-w-60{width:60%;}.uim-w-65{width:65%;}
.uim-w-70{width:70%;}.uim-w-75{width:75%;}.uim-w-80{width:80%;}.uim-w-85{width:85%;}.uim-w-90{width:90%;}.uim-w-95{width:95%;}.uim-w-100{width:100%;}
@media (max-width:575.98px){
  .uim-figur--kiri,.uim-figur--kanan{float:none;margin:.35rem 0 1rem;}
  .uim-figur[class*="uim-w-"]{width:100%;}
}
.uim-filter-form .form-control,.uim-filter-form .form-select{min-width:160px;}

/* Struktur organisasi & logo (pages/tentang.php bagian struktur / logo) dan info prodi (pages/akademik.php):
   .uim-gambar-besar = bingkai gambar struktur organisasi (klik → ukuran penuh di tab baru), .uim-logo-besar = logo unit bulat,
   .uim-info-prodi = grid <dl> jenjang / gelar / akreditasi pada halaman prodi */
.uim-gambar-besar{background:var(--glass,#fff);border:1px solid var(--glass-border,var(--line));border-radius:var(--radius);padding:1rem;display:block;box-shadow:var(--shadow-sm);}
.uim-gambar-besar img{width:100%;height:auto;display:block;border-radius:var(--radius-sm);}
.uim-logo-besar{width:min(100%,280px);height:auto;background:#fff;border-radius:50%;padding:10px;border:1px solid var(--line);box-shadow:var(--shadow-md);}
.uim-info-prodi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin-bottom:1.5rem;}
.uim-info-prodi div{background:var(--glass,#fff);border:1px solid var(--glass-border,var(--line));border-radius:var(--radius-sm);padding:.8rem 1rem;box-shadow:var(--shadow-sm);}
.uim-info-prodi dt{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.uim-info-prodi dd{margin:0;font-weight:600;}

/* Peta & kontak (pages/kontak.php): iframe Google Maps dari unit.maps_embed_url, tinggi tetap 360px */
.uim-map{border-radius:var(--radius);overflow:hidden;border:1px solid var(--glass-border,var(--line));background:#fff;box-shadow:var(--shadow-md);}
.uim-map iframe{display:block;width:100%;height:360px;border:0;}

/* ---- Pop-up video sambutan (partials/layout/video_popup.php #modalVideo; dibuka/ditutup main.js) ----
   Kepala modal --brand-dark bergaris atas aksen, badan hitam berisi iframe 16:9 (.ratio Bootstrap), kaki putih. */
.uim-modal-video .modal-content{border:0;border-top:4px solid var(--brand-accent);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);}
.uim-modal-video .modal-header{background:var(--brand-dark);color:#fff;border-bottom:0;padding:.75rem 1.1rem;}
.uim-modal-video .modal-title{color:#fff;font-size:1rem;}
.uim-modal-video .modal-title i{color:var(--brand-accent);}
.uim-modal-video .modal-header .btn-close{filter:invert(1) grayscale(1) brightness(2);opacity:.85;}
.uim-modal-video .modal-body{background:#000;}
.uim-modal-video .modal-footer{background:#fff;border-top:1px solid var(--line);}

/* Halaman 404 (pages/404.php): kode besar warna primer + teks ramah + tombol ke beranda unit/universitas */
.uim-404{text-align:center;padding:4rem 0;}
.uim-404 .uim-404-kode{font-family:var(--ff-display);font-size:clamp(4rem,12vw,7rem);font-weight:900;line-height:1;
  background:linear-gradient(135deg,var(--brand-primary),var(--brand-dark));-webkit-background-clip:text;background-clip:text;color:var(--brand-primary);-webkit-text-fill-color:transparent;} /* angka 404 bergradien primer → sekunder (dekoratif, aria-hidden; primer → aksen terlihat kusam) */
.uim-404-teks{max-width:52ch;}

/* =====================================================================
   FOOTER (partials/layout/footer.php)
   Latar --brand-dark bergaris atas aksen, tiga kolom: identitas + alamat + sosmed (.uim-footer-logo, .uim-footer-nama,
   .uim-footer-kontak) · Program Studi/Fakultas (dari tabel unit) · Portal/Link Terkait (dari tabel tautan).
   .uim-footer-stat = baris statistik pengunjung seluruh situs (statistik_ambil(), unit_id 0) + keterangan cara hitung
   (.uim-footer-stat-ket); .uim-footer-bottom = baris hak cipta date('Y').
   ===================================================================== */
/* footer bergradien dengan sudut atas membulat, garis gradien aksen → primer di tepi atas, dan glow primer di kanan atas (KP-51) */
.uim-footer{position:relative;overflow:hidden;color:rgba(255,255,255,.85);padding-top:3.5rem;margin-top:auto;border-top:0;
  border-radius:var(--radius-lg,1.6rem) var(--radius-lg,1.6rem) 0 0;
  background:linear-gradient(90deg,var(--brand-accent),var(--brand-primary)) top/100% 4px no-repeat,
             radial-gradient(circle at 92% 0%,rgba(var(--brand-primary-rgb),.5),transparent 50%),
             linear-gradient(160deg,var(--brand-dark),var(--brand-darker));}
.uim-footer h3{color:#fff;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;display:flex;gap:.5rem;align-items:center;margin-bottom:1rem;}
.uim-footer h3::before{content:"";width:4px;height:14px;background:var(--brand-accent);border-radius:2px;}
.uim-footer a{color:rgba(255,255,255,.85);text-decoration:none;transition:color var(--t);}
.uim-footer a:hover{color:var(--brand-accent-text,var(--brand-accent));text-decoration:underline;text-underline-offset:2px;} /* garis bawah = penanda hover non-warna (teks bisa putih, KP-50) */
.uim-footer .uim-sosmed a:hover{text-decoration:none;color:#fff;} /* ikon sosmed: tanpa garis bawah, tetap putih di atas latar primer (.uim-sosmed a:hover) */
.uim-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem;font-size:.9rem;}
.uim-footer-kontak{font-size:.92rem;}
.uim-footer-nama{font-family:var(--ff-display);color:#fff;font-size:1.05rem;}
.uim-footer-logo{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:50%;padding:3px;}
.uim-footer-stat{border-top:1px solid rgba(255,255,255,.12);margin-top:2.5rem;padding:.8rem 0;font-size:.8rem;color:rgba(255,255,255,.85);}
.uim-footer-stat strong{color:#fff;font-weight:700;}
.uim-footer-stat-label{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.7rem;color:var(--brand-accent-text,var(--brand-accent));}
.uim-footer-stat-ket{margin-left:auto;font-size:.72rem;color:rgba(255,255,255,.85);}
.uim-footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:1.1rem 0;font-size:.82rem;color:rgba(255,255,255,.85);background:rgba(0,0,0,.15);}
.uim-footer-bottom a{color:rgba(255,255,255,.85);}
/* Ruang tombol mengambang (KP-57): footer.php memberi .uim-footer--fab bila tombol "Kontak" dicetak (semua halaman kecuali kontak & 404).
   Baris statistik & hak cipta lalu tidak masuk pita kanan yang dipakai tombol Kontak (±116 px + 1.25rem dari tepi) dan tombol ke atas,
   sehingga tautan/teks kanannya tetap terbaca & dapat diklik saat halaman digulir sampai dasar. ≥ 1600 px kontainer sudah cukup jauh
   dari tepi kanan → padding normal. [PANDUAN UPDATE] Ikut diubah bila ukuran/posisi .uim-kontak-fab berubah (lihat blok POP-UP). */
.uim-footer--fab .uim-footer-stat .container,.uim-footer--fab .uim-footer-bottom .container{padding-right:10rem;}
@media (max-width:575.98px){.uim-footer--fab .uim-footer-stat .container,.uim-footer--fab .uim-footer-bottom .container{padding-right:5rem;}}
@media (min-width:1600px){.uim-footer--fab .uim-footer-stat .container,.uim-footer--fab .uim-footer-bottom .container{padding-right:.75rem;}}

/* ---- Tombol ke atas (.uim-scroll-top, dicetak footer.php) ----
   Tersembunyi (opacity 0, visibility hidden) sampai main.js memberi .is-visible saat scrollY > 320. */
.uim-scroll-top{position:fixed;right:1.25rem;bottom:1.25rem;width:44px;height:44px;border-radius:50%;color:#fff;
  background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-hover));
  border:0;display:grid;place-items:center;box-shadow:0 10px 26px rgba(var(--brand-primary-rgb),.4);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--t),transform var(--t),visibility var(--t),background var(--t);z-index:1020;font-size:1.1rem;}
.uim-scroll-top.is-visible{opacity:1;visibility:visible;transform:none;}
.uim-scroll-top.is-visible:hover{background:var(--brand-dark);transform:translateY(-3px);}

/* ---- Gerak minimal (prefers-reduced-motion) ----
   Mematikan semua animasi/transisi CSS (termasuk kursor ketik & fade slide) dan smooth scroll. Autoplay slider dan
   efek ketik dimatikan juga dari sisi JS: main.js memeriksa media query yang sama lewat matchMedia.
   [PANDUAN UPDATE] Animasi/transisi baru cukup memakai properti animation/transition biasa agar otomatis ikut dimatikan di sini. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .uim-card:hover,.uim-card-berita:hover .uim-card-berita-media .uim-media-foto,.uim-fasilitas:hover .uim-fasilitas-media .uim-media-foto,.uim-galeri-item a:hover .uim-media-foto,.uim-body .btn:hover,.uim-stat:hover,
  .uim-subnav a:hover,.uim-dok-list a:hover,.uim-scroll-top.is-visible:hover,.uim-kontak-fab:hover,.uim-kontak-panel,.uim-page-band::before{transform:none;}
}