/* =====================================================================
   style.css — Token warna, tipografi, dan komponen UI LPMI UIM.
   Dipakai sisi publik & admin (admin.css memuat layout panel admin).
   Prinsip: Bootstrap dulu, CSS kustom hanya untuk identitas visual.
   ===================================================================== */

:root{
  --uim-red:#C8102E;
  --uim-red-dark:#7A0B1B;
  --uim-gold:#FFC72C;
  --uim-gold-dk:#E0A106;
  --uim-green:#2E7D32;
  --uim-ink:#1B1B1F;
  --uim-mist:#F4F5F7;
  --uim-line:#E3E5E9;

  /* Override Bootstrap: primary jadi merah UIM */
  --bs-primary:#C8102E;
  --bs-primary-rgb:200,16,46;
  --bs-link-color:#C8102E;
  --bs-link-color-rgb:200,16,46;
  --bs-link-hover-color:#7A0B1B;
  --bs-link-hover-color-rgb:122,11,27;

  --ff-display:'Plus Jakarta Sans',system-ui,sans-serif;
  --ff-body:'Inter',system-ui,sans-serif;
  --ff-data:'IBM Plex Mono',ui-monospace,monospace;
}

/* ---- Tipografi dasar ---- */
body{font-family:var(--ff-body);color:var(--uim-ink);font-size:1rem;line-height:1.65;}
h1,h2,h3,.h1,.h2,.h3,.navbar-brand{font-family:var(--ff-display);font-weight:800;letter-spacing:-.01em;}
h1,.h1{font-size:clamp(2rem,4vw,3rem);}
h2,.h2{font-size:1.75rem;}
h3,.h3{font-size:1.25rem;}
.num{font-family:var(--ff-data);font-variant-numeric:tabular-nums;}

/* ---- Utilitas seksi ---- */
.section{padding:clamp(2.5rem,6vw,4.5rem) 0;}
.section--mist{background:var(--uim-mist);}
.section-title{
  position:relative;padding-bottom:.65rem;margin-bottom:1.75rem;
  text-transform:uppercase;font-size:1.35rem;
}
.section-title::after{
  content:"";position:absolute;left:0;bottom:0;width:64px;height:4px;background:var(--uim-gold);
}
.text-uim{color:var(--uim-red)!important;}

/* ---- Tombol khas UIM ---- */
.btn-uim{--bs-btn-color:#fff;--bs-btn-bg:var(--uim-red);--bs-btn-border-color:var(--uim-red);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--uim-red-dark);--bs-btn-hover-border-color:var(--uim-red-dark);
  --bs-btn-active-color:#fff;--bs-btn-active-bg:var(--uim-red-dark);--bs-btn-active-border-color:var(--uim-red-dark);
  --bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:var(--uim-red);--bs-btn-disabled-border-color:var(--uim-red);
  --bs-btn-focus-shadow-rgb:200,16,46;}
.btn-outline-uim{--bs-btn-color:var(--uim-red);--bs-btn-border-color:var(--uim-red);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--uim-red);--bs-btn-hover-border-color:var(--uim-red);
  --bs-btn-active-color:#fff;--bs-btn-active-bg:var(--uim-red-dark);--bs-btn-active-border-color:var(--uim-red-dark);
  --bs-btn-disabled-color:var(--uim-red);--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:var(--uim-red);
  --bs-btn-focus-shadow-rgb:200,16,46;}
.btn-uim-gold{--bs-btn-color:var(--uim-red-dark);--bs-btn-bg:var(--uim-gold);--bs-btn-border-color:var(--uim-gold);
  --bs-btn-hover-color:var(--uim-red-dark);--bs-btn-hover-bg:var(--uim-gold-dk);--bs-btn-hover-border-color:var(--uim-gold-dk);
  --bs-btn-active-color:var(--uim-red-dark);--bs-btn-active-bg:var(--uim-gold-dk);--bs-btn-active-border-color:var(--uim-gold-dk);
  --bs-btn-focus-shadow-rgb:255,199,44;font-weight:700;}

.link-download{color:var(--uim-red);font-weight:600;text-decoration:underline;}
.link-download:hover{color:var(--uim-red-dark);}

/* Form: fokus merah tipis, bukan biru Bootstrap */
.form-control:focus,.form-select:focus,.form-check-input:focus{
  border-color:rgba(200,16,46,.55);box-shadow:0 0 0 .2rem rgba(200,16,46,.15);
}
.form-check-input:checked{background-color:var(--uim-red);border-color:var(--uim-red);}
.pagination{--bs-pagination-color:var(--uim-red);--bs-pagination-hover-color:var(--uim-red-dark);
  --bs-pagination-active-bg:var(--uim-red);--bs-pagination-active-border-color:var(--uim-red);
  --bs-pagination-focus-color:var(--uim-red-dark);--bs-pagination-focus-box-shadow:0 0 0 .2rem rgba(200,16,46,.15);}
.accordion{--bs-accordion-active-bg:rgba(200,16,46,.06);--bs-accordion-active-color:var(--uim-red-dark);
  --bs-accordion-btn-focus-box-shadow:0 0 0 .2rem rgba(200,16,46,.15);}

/* Header tabel merah (tabel akreditasi & admin) */
.uim-thead th{background:var(--uim-red);color:#fff;font-weight:600;white-space:nowrap;}

/* Fokus keyboard kelihatan */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--uim-gold);outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* ===================================================================
   NAVBAR (partials/navbar.php)
   =================================================================== */
.uim-brand-text strong{color:var(--uim-red);font-size:1.15rem;line-height:1;}
.uim-brand-text small{color:var(--uim-ink);font-size:.72rem;}
.uim-navbar .nav-link{font-weight:600;font-size:.95rem;}
.uim-navbar .nav-link.active,.uim-navbar .nav-link:hover{color:var(--uim-red);}
.uim-navbar .dropdown-menu{border:0;border-top:3px solid var(--uim-red);box-shadow:0 12px 28px rgba(0,0,0,.10);}
.uim-navbar .dropdown-item:active,.uim-navbar .dropdown-item:focus{background:var(--uim-red);color:#fff;}
@media (min-width:992px){
  .dropdown-submenu{position:relative;}
  .dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-.5rem;display:none;}
  .dropdown-submenu:hover>.dropdown-menu,.dropdown-submenu:focus-within>.dropdown-menu{display:block;}
  .dropdown-submenu>.dropdown-toggle::after{transform:rotate(-90deg);float:right;margin-top:.5rem;}
}
@media (max-width:991.98px){
  .dropdown-submenu>.dropdown-menu{display:none;position:static;box-shadow:none;padding-left:1rem;border-top:0;}
  .dropdown-submenu.open>.dropdown-menu{display:block;}
  .uim-navbar .dropdown-menu{max-height:70vh;overflow-y:auto;}
}

/* ===================================================================
   PITA PPEPP (partials/ppepp_ribbon.php)
   =================================================================== */
.ppepp-ribbon{display:flex;flex-wrap:wrap;gap:2px;background:var(--uim-red-dark);}
.ppepp-step{flex:1 1 180px;display:flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem;
  background:var(--uim-red);color:#fff;text-decoration:none;font-weight:600;transition:background .15s;}
.ppepp-step:hover{background:var(--uim-red-dark);color:#fff;}
.ppepp-step.is-active{background:var(--uim-gold);color:var(--uim-red-dark);}
.ppepp-step:focus-visible{outline-offset:-4px;}
.ppepp-num{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.18);font-size:.8rem;flex:0 0 26px;}
.ppepp-step.is-active .ppepp-num{background:rgba(122,11,27,.15);}

/* ===================================================================
   HERO (index.php)
   =================================================================== */
.uim-hero{position:relative;min-height:520px;display:flex;align-items:center;
  background-size:cover;background-position:center;background-color:var(--uim-red-dark);color:#fff;}
.uim-hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(122,11,27,.88), rgba(122,11,27,.42));}
.uim-hero .container{position:relative;z-index:1;padding-bottom:5.5rem;}
.uim-hero-eyebrow{color:var(--uim-gold);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;font-size:.85rem;}
.uim-hero h1{color:#fff;max-width:16ch;}
.uim-hero p{max-width:52ch;}
.uim-hero-alamat{position:absolute;left:0;right:0;bottom:0;background:rgba(27,27,31,.72);color:#fff;
  padding:.6rem 1rem;font-size:.875rem;z-index:1;}
.uim-hero-alamat i{color:var(--uim-gold);margin-right:.35rem;}
@media (min-width:576px){
  .uim-hero-alamat{right:auto;max-width:min(90%,640px);border-top-right-radius:.5rem;}
  .uim-hero .container{padding-bottom:4.5rem;}
}

/* ===================================================================
   QUICK LINKS (index.php)
   =================================================================== */
.uim-quicklink{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;
  padding:1.25rem 1rem;background:#fff;border:1px solid var(--uim-line);border-top:3px solid var(--uim-gold);
  border-radius:.6rem;text-decoration:none;color:var(--uim-ink);height:100%;
  transition:transform .15s,box-shadow .15s;}
.uim-quicklink:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08);color:var(--uim-red);}
.uim-quicklink i{font-size:1.75rem;color:var(--uim-red);}
.uim-quicklink span{font-weight:600;font-size:.9rem;}

/* ===================================================================
   KARTU BERITA & MEDIA (index.php, berita.php)
   =================================================================== */
.uim-card-berita{transition:transform .15s,box-shadow .15s;}
.uim-card-berita:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.10)!important;}
.uim-card-berita .card-title a{color:inherit;text-decoration:none;}
.uim-card-berita .card-title a:hover{color:var(--uim-red);}
.uim-media{display:block;width:100%;object-fit:cover;background:var(--uim-mist);}
.uim-media-16x9{aspect-ratio:16/9;}
.uim-media-4x3{aspect-ratio:4/3;}
.uim-media-1x1{aspect-ratio:1/1;}
.uim-media-auto{aspect-ratio:auto;height:auto;}
.uim-media-link{display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;min-height:160px;}
.uim-media-link a{display:grid;place-items:center;gap:.15rem;color:var(--uim-red);text-decoration:none;font-weight:600;font-size:.9rem;}
.uim-media-link a i{font-size:2.25rem;}
.uim-berita-foto{max-height:520px;object-fit:cover;width:100%;border-radius:.6rem;background:var(--uim-mist);}

/* Teks artikel (berita_detail.php) */
.uim-prose{font-size:1.05rem;line-height:1.8;max-width:72ch;}
.uim-prose p{margin-bottom:1.1rem;}
.uim-prose-lg{font-size:1.1rem;line-height:1.8;}

/* Kotak grafik Chart.js (butuh tinggi tegas karena maintainAspectRatio:false) */
.uim-chart-box{position:relative;height:260px;}

/* Daftar dokumen ringkas (beranda, partial dokumen_tautan) */
.uim-list-dokumen .list-group-item{padding-left:0;padding-right:0;}

/* Daftar pengumuman (index.php) */
.uim-pengumuman .list-group-item{padding-left:0;padding-right:0;}
.uim-pengumuman .uim-pengumuman-tgl{font-size:.78rem;color:#6c757d;}
.uim-pengumuman a{color:var(--uim-ink);text-decoration:none;font-weight:600;}
.uim-pengumuman a:hover{color:var(--uim-red);}

/* ===================================================================
   PAGE HEADER (partials/page_header.php)
   =================================================================== */
.uim-page-header{background:var(--uim-mist);border-bottom:1px solid var(--uim-line);padding:1.75rem 0;}
.uim-page-title{position:relative;display:inline-block;padding-bottom:.5rem;margin-bottom:0;font-size:1.75rem;}
.uim-page-title::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:4px;background:var(--uim-gold);}
.uim-page-subtitle{color:#6c757d;margin-top:.75rem;max-width:70ch;}
.breadcrumb a{color:var(--uim-red);text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}
.uim-icon-circle{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(200,16,46,.12);color:var(--uim-red);flex:0 0 48px;}

/* ===================================================================
   HALAMAN TERPROTEKSI (protected_page.php)
   =================================================================== */
.uim-form-proteksi{max-width:420px;margin:0 0 2.5rem;}
.uim-form-proteksi .form-control{flex:1 1 200px;}
.uim-proteksi-hasil{max-width:640px;margin:0 0 2.5rem;}
.btn-share{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--uim-line);
  color:var(--uim-red);border-radius:50%;padding:0;}
.btn-share:hover{background:var(--uim-red);color:#fff;border-color:var(--uim-red);}

/* ===================================================================
   FOOTER (partials/footer.php)
   =================================================================== */
.uim-footer{background:var(--uim-red-dark);color:#fff;padding-top:2.5rem;}
.uim-footer strong{font-family:var(--ff-display);}
.uim-footer-alamat{margin-bottom:1rem;}
.uim-footer-alamat i,.uim-footer-kontak i{color:var(--uim-gold);margin-right:.4rem;}
.uim-footer-kontak li{margin-bottom:.25rem;font-size:.925rem;}
.uim-footer a{color:rgba(255,255,255,.85);text-decoration:none;}
.uim-footer a:hover{color:var(--uim-gold);}
.uim-footer-logo{background:#fff;border-radius:6px;padding:3px;}
.uim-footer-map{border-radius:.5rem;overflow:hidden;border:2px solid rgba(255,255,255,.15);min-height:220px;}
.uim-copyright{border-top:1px solid rgba(255,255,255,.15);margin-top:2.5rem;font-size:.85rem;
  background:rgba(0,0,0,.12);}