/* ============================================
   LABORATORIUM KEPERAWATAN - MAIN STYLESHEET
   v2.0 — High-Impact Visual Upgrade
   ============================================ */

/* ---------- CSS Variables ---------- */
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #eff6ff;
  --primary-50: rgba(37,99,235,0.08);
  --secondary: #059669;
  --secondary-dark: #047857;
  --accent: #06b6d4;
  --danger: #dc2626;
  --warning: #f59e0b;
  --dark: #0f172a;
  --gray-900: #1e293b;
  --gray-700: #475569;
  --gray-500: #64748b;
  --gray-400: #94a3b8;
  --gray-300: #e2e8f0;
  --gray-200: #f1f5f9;
  --gray-100: #f8fafc;
  --white: #ffffff;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --radius: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: all 0.4s cubic-bezier(0.4,0,0.2,1);
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Plus Jakarta Sans', var(--font-main);
  --max-width: 1200px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-main);
  color: var(--gray-900);
  background: var(--gray-100);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

::selection {
  background: var(--primary);
  color: #fff;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--dark);
  letter-spacing: -0.01em;
}

h1 { font-size: 2.75rem; font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: 2rem; letter-spacing: -0.02em; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; font-weight: 600; }

p {
  margin-bottom: 1rem;
  color: var(--gray-700);
  line-height: 1.7;
}

/* ---------- Utility Classes ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 5.5rem 0;
}

.section-title {
  text-align: center;
  margin-bottom: 3.5rem;
}

.section-title h2 {
  margin-bottom: 0.75rem;
  position: relative;
  display: inline-block;
}

.section-title h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 2px;
}

.section-title p {
  color: var(--gray-500);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 1.25rem auto 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.925rem;
  font-family: var(--font-main);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 1px 2px rgba(37,99,235,0.3);
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37,99,235,0.35);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--gray-300);
}

.btn-outline:hover {
  border-color: var(--primary);
  background: var(--primary-50);
  transform: translateY(-1px);
}

/* Dipakai di hero tetapi tidak pernah didefinisikan, sehingga tombolnya jatuh
   ke .btn-outline: teks biru primer di atas latar navy gelap — kontrasnya
   sekitar 2:1 dan praktis tidak terbaca. Di atas latar gelap, tombol garis
   harus memakai teks putih. */
.btn-hero-outline {
  color: var(--white);
  border-color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);
}

.btn-hero-outline:hover {
  color: var(--white);
  border-color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.16);
}

.btn-white {
  background: var(--white);
  color: var(--primary);
  box-shadow: var(--shadow-md);
}

.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-success {
  background: var(--secondary);
  color: var(--white);
}

.btn-success:hover {
  background: var(--secondary-dark);
}

.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
}

.text-center { text-align: center; }
.text-primary { color: var(--primary) !important; }
/* gray-500 hanya mencapai ~4,3:1 di atas bagian berlatar abu muda — di bawah
   ambang. gray-700 tetap terbaca sebagai teks sekunder, tapi lolos. */
.text-muted { color: var(--gray-700) !important; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

/* Utilitas jarak yang sudah dipakai di HTML tetapi tidak pernah didefinisikan.
   Akibatnya delapan penyesuaian jarak di beberapa halaman tidak berpengaruh
   sama sekali — paling terlihat di halaman galeri, tempat tab filter dan grid
   berada di dua <section> berbeda: keduanya tetap memakai padding penuh 5.5rem
   sehingga menyisakan lubang kosong lebih dari 200px di tengah halaman.
   Skalanya mengikuti utilitas margin di atas (1 satuan = 0.5rem). */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.5rem; }
.pt-2 { padding-top: 1rem; }
.pt-3 { padding-top: 1.5rem; }
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.5rem; }
.pb-2 { padding-bottom: 1rem; }
.pb-3 { padding-bottom: 1.5rem; }

/* ---------- Top Bar ---------- */
.top-bar {
  background: var(--dark);
  color: var(--gray-400);
  font-size: 0.8rem;
  padding: 0.5rem 0;
  letter-spacing: 0.01em;
}

.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.top-bar a {
  color: var(--gray-400);
}

.top-bar a:hover {
  color: var(--accent);
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ---------- Header / Navbar ---------- */
.header {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: var(--transition-slow);
}

.header.scrolled {
  box-shadow: var(--shadow-md);
  background: rgba(255,255,255,0.97);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0;
  min-height: 68px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-brand .logo-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 800;
  font-family: var(--font-heading);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}

.nav-brand .brand-text {
  line-height: 1.2;
}

.nav-brand .brand-text h1 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.02em;
}

.nav-brand .brand-text span {
  font-size: 0.7rem;
  color: var(--gray-500);
  font-weight: 500;
}

/* Main Nav */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.9rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--gray-700);
  border-radius: var(--radius-xs);
  transition: var(--transition);
  white-space: nowrap;
}

.nav-link:hover,
.nav-item.active .nav-link {
  color: var(--primary);
  background: var(--primary-50);
}

.nav-link .arrow {
  font-size: 0.6rem;
  transition: transform 0.25s;
}

.nav-item:hover .arrow {
  transform: rotate(180deg);
}

/* Dropdown */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 230px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gray-200);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: var(--transition);
  z-index: 1001;
}

.nav-item:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-xs);
  font-size: 0.875rem;
  color: var(--gray-700);
  transition: var(--transition);
}

.dropdown-menu a:hover {
  background: var(--primary-50);
  color: var(--primary);
}

.dropdown-menu a .icon {
  font-size: 1rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.dropdown-menu small {
  display: block;
  font-size: 0.7rem;
  color: var(--gray-500);
  margin-top: 0.1rem;
}

/* Mobile Toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--dark);
  padding: 0.5rem;
}

.nav-close {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--dark);
  padding: 0.5rem;
}

/* ---------- Hero Section ---------- */
.hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #1e3a5f 70%, #1e40af 100%);
  color: var(--white);
  padding: 6rem 0 5.5rem;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -15%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(37,99,235,0.1), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero-text h1 {
  font-size: 3.25rem;
  color: var(--white);
  margin-bottom: 1.25rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.hero-text h1 span {
  background: linear-gradient(135deg, var(--accent), #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-text p {
  font-size: 1.125rem;
  color: rgba(255,255,255,0.65);
  margin-bottom: 2rem;
  line-height: 1.75;
  max-width: 520px;
}

.hero-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.hero-stat {
  position: relative;
}

.hero-stat h3 {
  font-size: 2.25rem;
  color: var(--white);
  margin-bottom: 0.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #38bdf8, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-stat p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.72);
  margin: 0;
  font-weight: 500;
}

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 2rem;
  width: 100%;
  max-width: 420px;
  transition: var(--transition);
}

.hero-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}

/* Ditulis untuk h3, sedangkan markupnya h2 — judul kartu sambutan mewarisi
   warna judul umum (biru tua) di atas kartu gelap, sehingga nyaris tak
   terbaca. */
.hero-card h2,
.hero-card h3 {
  color: var(--white);
  margin-bottom: 1rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.hero-card .welcome-text {
  color: rgba(255,255,255,0.75);
  font-size: 0.925rem;
  line-height: 1.75;
  font-style: italic;
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin-bottom: 1.25rem;
}

.hero-card .signature {
  /* var(--accent) hanya 3,59:1 di atas kartu gelap; dicerahkan agar terbaca. */
  color: #67e8f9;
  font-weight: 600;
  font-size: 0.85rem;
}

/* ---------- Quick Access ---------- */
.quick-access {
  padding: 3rem 0;
  margin-top: -2.75rem;
  position: relative;
  z-index: 2;
}

.quick-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.quick-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: var(--transition);
  border: 1px solid transparent;
}

.quick-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary);
}

.quick-card .icon-box {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.quick-card .icon-box.blue { background: var(--primary-light); color: var(--primary); }
.quick-card .icon-box.green { background: #ecfdf5; color: var(--secondary); }
.quick-card .icon-box.cyan { background: #ecfeff; color: var(--accent); }

.quick-card h3,
.quick-card h4 {
  margin-bottom: 0.2rem;
  font-size: 1rem;
}

.quick-card p {
  font-size: 0.825rem;
  margin: 0;
  color: var(--gray-500);
}

/* ---------- Announcement Bar ---------- */
.announcement {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow);
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-left: 4px solid var(--warning);
}

.announcement .badge {
  background: var(--warning);
  color: var(--dark);
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.announcement p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--gray-700);
  line-height: 1.6;
}

/* ---------- Section Blocks ---------- */
.content-section {
  padding: 5.5rem 0;
}

.content-section:nth-child(even) {
  background: var(--white);
}

/* Cards Grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid var(--gray-200);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: transparent;
}

.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: linear-gradient(135deg, var(--primary-light), #ecfeff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--primary);
}

.card-body {
  padding: 1.5rem;
}

.card-body h3 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.card-body p {
  font-size: 0.875rem;
  color: var(--gray-500);
}

/* ---------- Audience Navigation ---------- */
.audience-section {
  background: var(--white);
  padding: 4.5rem 0;
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.audience-card {
  text-align: center;
  padding: 2.5rem 2rem;
  border-radius: var(--radius);
  background: var(--gray-100);
  border: 2px solid transparent;
  transition: var(--transition);
}

.audience-card:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.audience-card .icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.audience-card h3 {
  margin-bottom: 0.75rem;
}

.audience-card p {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-bottom: 1.25rem;
}

.audience-card ul {
  text-align: left;
  display: inline-block;
}

.audience-card ul li {
  padding: 0.4rem 0;
  font-size: 0.875rem;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.audience-card ul li::before {
  content: '→';
  color: var(--primary);
  font-weight: 700;
}

/* ---------- Lab Cards (Fasilitas) ---------- */
.lab-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-200);
  transition: var(--transition);
}

.lab-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-3px);
}

.lab-card-header {
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
}

.lab-card-header h3 {
  color: var(--white);
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.lab-card-header p {
  color: rgba(255,255,255,0.92);
  font-size: 0.825rem;
  margin: 0;
}

.lab-card-body {
  padding: 1.5rem;
}

.lab-card-body .info-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.875rem;
}

.lab-card-body .info-row:last-child {
  border-bottom: none;
}

.lab-card-body .info-row .label {
  font-weight: 600;
  color: var(--dark);
  min-width: 100px;
  flex-shrink: 0;
}

.lab-card-body .info-row .value {
  color: var(--gray-500);
}

.lab-card-body .equipment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.lab-card-body .equipment-list .tag {
  background: var(--primary-50);
  color: var(--primary);
  padding: 0.25rem 0.7rem;
  border-radius: 20px;
  font-size: 0.775rem;
  font-weight: 500;
  border: 1px solid rgba(37,99,235,0.1);
}

/* ---------- Table Styles ---------- */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--white);
  border: 1px solid var(--gray-200);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table thead {
  background: var(--primary);
  color: var(--white);
}

.table th {
  padding: 0.9rem 1.25rem;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  font-size: 0.825rem;
  letter-spacing: 0.02em;
}

.table td {
  padding: 0.8rem 1.25rem;
  border-bottom: 1px solid var(--gray-200);
}

.table tbody tr {
  transition: var(--transition);
}

.table tbody tr:hover {
  background: var(--primary-50);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* ---------- Timeline ---------- */
.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--primary), var(--accent));
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  padding-bottom: 2rem;
  padding-left: 1.5rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 0.35rem;
  width: 10px;
  height: 10px;
  background: var(--primary);
  border-radius: 50%;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 3px var(--primary);
}

.timeline-item h3,
.timeline-item h4 {
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}

.timeline-item p {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin: 0;
}

/* ---------- Accordion / FAQ ---------- */
.accordion {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid var(--gray-200);
}

.accordion-item {
  border-bottom: 1px solid var(--gray-200);
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  width: 100%;
  background: none;
  border: none;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark);
  transition: var(--transition);
}

.accordion-header:hover {
  background: var(--gray-100);
}

.accordion-header .icon {
  font-size: 1.1rem;
  transition: transform 0.25s;
  color: var(--gray-400);
}

.accordion-item.active .accordion-header .icon {
  transform: rotate(180deg);
  color: var(--primary);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
}

.accordion-content-inner {
  padding: 0 1.5rem 1.25rem;
  font-size: 0.9rem;
  color: var(--gray-700);
  line-height: 1.8;
}

/* ---------- Gallery Grid ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.gallery-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--primary-light), #ecfeff);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.gallery-item:hover {
  transform: scale(1.02);
}

.gallery-item .placeholder-icon {
  font-size: 3rem;
  color: var(--primary);
  transition: var(--transition);
}

.gallery-item:hover .placeholder-icon {
  transform: scale(1.1);
}

.gallery-item .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(15,23,42,0.8));
  color: var(--white);
  padding: 1.5rem 1rem 1rem;
  transform: translateY(100%);
  transition: var(--transition);
}

.gallery-item:hover .overlay {
  transform: translateY(0);
}

.gallery-item .overlay h3,
.gallery-item .overlay h4 {
  color: var(--white);
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.gallery-item .overlay p {
  color: rgba(255,255,255,0.7);
  font-size: 0.8rem;
  margin: 0;
}

/* ---------- Contact Section ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.contact-form {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-200);
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
  color: var(--dark);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: 0.9rem;
  transition: var(--transition);
  background: var(--white);
  color: var(--gray-900);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-info-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.info-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: var(--transition);
  border: 1px solid var(--gray-200);
}

.info-card:hover {
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.info-card .icon-box {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--primary-50);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.info-card h3,
.info-card h4 {
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.info-card p {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin: 0;
  line-height: 1.6;
}

/* ---------- K3 / Safety Section ---------- */
.safety-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.safety-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--danger);
  transition: var(--transition);
}

.safety-card:nth-child(2) { border-top-color: var(--warning); }
.safety-card:nth-child(3) { border-top-color: var(--secondary); }
.safety-card:nth-child(4) { border-top-color: var(--primary); }

.safety-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.safety-card .icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.safety-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}

.safety-card ul {
  padding-left: 0;
}

.safety-card ul li {
  padding: 0.35rem 0;
  font-size: 0.875rem;
  color: var(--gray-700);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.safety-card ul li::before {
  content: '✓';
  color: var(--secondary);
  font-weight: 700;
  flex-shrink: 0;
}

/* ---------- Document List ---------- */
.doc-list {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid var(--gray-200);
}

.doc-item {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--gray-200);
  transition: var(--transition);
}

.doc-item:last-child {
  border-bottom: none;
}

.doc-item:hover {
  background: var(--gray-100);
}

.doc-item .doc-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--primary-50);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-right: 1rem;
  flex-shrink: 0;
}

.doc-item .doc-info {
  flex: 1;
}

.doc-item .doc-info h3,
.doc-item .doc-info h4 {
  font-size: 0.9rem;
  margin-bottom: 0.15rem;
}

.doc-item .doc-info p {
  font-size: 0.775rem;
  color: var(--gray-500);
  margin: 0;
}

.doc-item .doc-action {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}

.doc-item .doc-action:hover {
  text-decoration: underline;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--dark);
  color: var(--gray-400);
  padding: 4.5rem 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Ditulis untuk h4, tetapi seluruh halaman memakai h2/h3 — akibatnya keempat
   judul di footer mewarisi warna judul umum (biru tua) yang sama persis
   dengan latar footer, sehingga tidak terlihat sama sekali. */
.footer h2,
.footer h3,
.footer h4 {
  color: var(--white);
  font-size: 1rem;
  margin-bottom: 1.25rem;
  font-weight: 600;
}

.footer h2 {
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

.footer p {
  font-size: 0.875rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.72);
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.72);
}

.footer-links a:hover {
  color: var(--accent);
  padding-left: 4px;
}

/* Ditulis untuk daftar <li>, padahal markupnya <address> berisi <span> yang
   dipisah <br>. Akibatnya jarak dan warna ikon tidak pernah berlaku, dan
   alamat tampil miring mengikuti gaya bawaan <address> peramban. */
.footer-contact {
  font-style: normal;
  font-size: 0.875rem;
  line-height: 2.1;
  color: rgba(255,255,255,0.78);
}

.footer-contact .icon {
  color: var(--accent);
  margin-right: 0.55rem;
  display: inline-block;
  width: 1.1em;
  text-align: center;
}

.footer-contact a {
  color: inherit;
  text-decoration: none;
}

.footer-contact a:hover {
  color: var(--accent);
}

.footer-bottom {
  padding: 1.5rem 0;
  text-align: center;
  font-size: 0.8rem;
  /* 0.35 hanya mencapai ~3:1 pada latar footer — di bawah ambang 4.5:1
     untuk teks sekecil ini. */
  color: rgba(255,255,255,0.62);
}

/* ---------- Page Header ---------- */
.page-header {
  background: linear-gradient(135deg, #0f172a, #1e3a5f);
  color: var(--white);
  padding: 5rem 0 3rem;
  text-align: center;
}

.page-header h1 {
  color: var(--white);
  font-size: 2.25rem;
  margin-bottom: 0.75rem;
}

.page-header p {
  color: rgba(255,255,255,0.6);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto;
}

.breadcrumb {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  /* 0.45 hanya ~3,66:1 pada latar hero gelap; teks sekecil ini butuh 4,5:1. */
  color: rgba(255,255,255,0.75);
}

.breadcrumb a {
  color: var(--accent);
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* ---------- Filter Tabs ---------- */
.filter-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  justify-content: center;
}

.filter-tab {
  padding: 0.55rem 1.35rem;
  border-radius: 30px;
  font-weight: 500;
  font-size: 0.85rem;
  background: var(--white);
  border: 1.5px solid var(--gray-300);
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-main);
  color: var(--gray-700);
}

.filter-tab:hover,
.filter-tab.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}

/* ---------- Map Placeholder ---------- */
.map-placeholder {
  width: 100%;
  height: 300px;
  background: var(--gray-200);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  font-size: 0.95rem;
}

/* ---------- Back to Top ---------- */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  background: var(--primary);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: var(--transition);
  border: none;
  box-shadow: 0 4px 12px rgba(37,99,235,0.3);
  z-index: 999;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37,99,235,0.4);
}

/* ---------- Modal / Lightbox ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.85);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.modal-overlay.active {
  display: flex;
}

.modal-content {
  background: var(--white);
  border-radius: var(--radius);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--gray-500);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.5rem;
  }

  .hero-text h1 { font-size: 2.5rem; }

  .hero-text p { margin-left: auto; margin-right: auto; }

  .hero-buttons { justify-content: center; }

  .hero-stats { justify-content: center; }

  .hero-visual { display: none; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }

  .section { padding: 3.5rem 0; }
  .section-title { margin-bottom: 2.5rem; }

  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: var(--white);
    flex-direction: column;
    padding: 5rem 1.5rem 2rem;
    box-shadow: -5px 0 30px rgba(0,0,0,0.1);
    transition: right 0.3s cubic-bezier(0.4,0,0.2,1);
    overflow-y: auto;
    z-index: 1001;
  }

  .nav-menu.active {
    right: 0;
  }

  .nav-toggle { display: block; }

  .nav-close {
    display: block;
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
  }

  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 0.25rem 0 0.25rem 1rem;
    display: none;
  }

  .nav-item.active .dropdown-menu {
    display: block;
  }

  .nav-link {
    padding: 0.75rem 1rem;
    width: 100%;
  }

  .quick-cards {
    grid-template-columns: 1fr;
  }

  .audience-grid {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero {
    padding: 4rem 0 3rem;
  }

  .hero-text h1 {
    font-size: 2rem;
  }

  .hero-stats {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }

  .top-bar {
    display: none;
  }

  .mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.5);
    z-index: 1000;
    display: none;
  }

  .mobile-overlay.active {
    display: block;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 1rem;
  }

  .hero-text h1 {
    font-size: 1.75rem;
  }

  .btn {
    padding: 0.65rem 1.25rem;
    font-size: 0.85rem;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
}

/* ---------- Animations ---------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in-up {
  animation: fadeInUp 0.7s cubic-bezier(0.4,0,0.2,1) forwards;
  opacity: 0;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

/* ---------- Print Styles ---------- */
@media print {
  .header, .footer, .back-to-top, .nav-toggle {
    display: none !important;
  }

  .hero {
    background: #f8f9fa !important;
    color: #1e293b !important;
  }

  .hero-text h1 { color: #1e293b; }

  body {
    font-size: 12pt;
    color: #000;
  }
}

/* ---------- SIMLAB Integration ---------- */
.simlab-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 0.4rem;
}

.simlab-badge::before {
  content: '⚡';
  font-size: 0.65rem;
}

.simlab-redirect-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 2px dashed var(--gray-300);
  transition: var(--transition);
}

.simlab-redirect-card:hover {
  border-color: var(--secondary);
  border-style: solid;
  box-shadow: var(--shadow);
}

/* ---------- Skip to Content ---------- */
.skip-to-content {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  background: var(--primary);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  font-size: 0.875rem;
  transition: top 0.2s;
}

.skip-to-content:focus {
  top: 0;
}

/* ---------- Gallery Placeholder ---------- */
.gallery-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--primary-light), #ecfeff);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

/* ---------- Visually Hidden (Screen Reader Only) ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ---------- Inline Style Replacements ---------- */
.vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.tujuan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.tujuan-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.tujuan-num {
  color: var(--primary);
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
}

.tujuan-item p {
  margin: 0;
  font-size: 0.9rem;
}

.org-chart {
  text-align: center;
}

.org-card {
  display: inline-block;
  min-width: 280px;
  margin-bottom: 1rem;
}

/* Bentuk avatar dipisah dari ukurannya.
   Sebelumnya sifat bulat, perataan tengah, dan warnanya hanya ditulis pada
   .org-card .avatar, sedangkan .org-sub-card .avatar hanya menimpa ukuran —
   dan karena keduanya selektor berbeda, avatar di kartu bawah tampil sebagai
   KOTAK bersudut tajam dengan ikon menempel di pojok. */
.org-card .avatar,
.org-sub-card .avatar {
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.org-card .avatar {
  width: 70px;
  height: 70px;
  font-size: 1.5rem;
}

.org-sub {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.org-sub-card {
  min-width: 220px;
}

.org-sub-card .avatar {
  width: 55px;
  height: 55px;
  font-size: 1.2rem;
}

.org-sub-card .avatar.green { background: var(--secondary); }
.org-sub-card .avatar.cyan { background: var(--accent); }
.org-sub-card .avatar.yellow { background: var(--warning); color: var(--dark); }

.sdm-card-img {
  height: 180px;
}

.sdm-card-img.blue { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.sdm-card-img.yellow { background: linear-gradient(135deg, var(--warning), #e0a800); }
.sdm-card-img.green { background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)); }
.sdm-card-img.cyan { background: linear-gradient(135deg, var(--accent), #0aa2ed); }

.sdm-role {
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.sdm-qual {
  font-size: 0.85rem;
}

.k3-principles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.k3-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.k3-item .icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.k3-item h3,
.k3-item h4 {
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.k3-item p {
  font-size: 0.85rem;
  margin: 0;
}

.contact-address {
  font-style: normal;
  line-height: 1.7;
}

/* Warna kepala kartu lab.
   Cyan dan kuning versi terang hanya mencapai 2,43:1 dan 2,15:1 terhadap teks
   putih — di bawah ambang mana pun, dan memang terbaca samar. Keduanya
   digelapkan sampai lolos 4,5:1 tanpa mengubah identitas warnanya; hijau ikut
   digelapkan sedikit agar teks keterangan yang kecil juga terbaca. */
.lab-card-header.npb { background: linear-gradient(135deg, var(--secondary-dark), #065f46); }
.lab-card-header.maternitas { background: linear-gradient(135deg, #b91c1c, #991b1b); }
.lab-card-header.anak { background: linear-gradient(135deg, #0e7490, #0369a1); }
.lab-card-header.gawat { background: linear-gradient(135deg, #b45309, #92400e); }
.lab-card-header.jiwa { background: linear-gradient(135deg, #6f42c1, #5a32a3); }

.map-frame {
  width: 100%;
  height: 300px;
  border: none;
  border-radius: var(--radius);
}

.safety-card-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.safety-red { border-top-color: var(--danger); }
.safety-yellow { border-top-color: var(--warning); }
.safety-green { border-top-color: var(--secondary); }
.safety-blue { border-top-color: var(--primary); }

.doc-icon-default { background: var(--primary-50); color: var(--primary); }
.doc-icon-green { background: #ecfdf5; color: var(--secondary); }
.doc-icon-cyan { background: #ecfeff; color: var(--accent); }
.doc-icon-yellow { background: #fffbeb; color: var(--warning); }

.card-img-gradient-1 { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.card-img-gradient-2 { background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)); }
.card-img-gradient-3 { background: linear-gradient(135deg, var(--accent), #0aa2ed); }
.card-img-gradient-4 { background: linear-gradient(135deg, var(--warning), #e0a800); }
.card-img-gradient-5 { background: linear-gradient(135deg, #6f42c1, #5a32a3); }

.safety-section { border-left: 4px solid var(--danger); }
.cedera-section { border-left: 4px solid var(--warning); }
.kebakaran-section { border-left: 4px solid var(--danger); }

.audience-list-item {
  padding: 0.4rem 0;
  font-size: 0.875rem;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.audience-list-item::before {
  content: '→';
  color: var(--primary);
  font-weight: 700;
}

.osce-card-img { height: 150px; }

.simlab-banner {
  border-left-color: var(--secondary);
}

.simlab-banner .badge {
  /* var(--secondary) hanya 3,77:1 terhadap teks putih pada ukuran 12px. */
  background: var(--secondary-dark);
  color: #fff;
}

.simlab-center-card {
  max-width: 700px;
  margin: 0 auto;
}

.simlab-center-card .card-body {
  text-align: center;
  padding: 3rem 2rem;
}

.simlab-center-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.simlab-cards-grid {
  max-width: 900px;
  margin: 0 auto;
}

.simlab-cards-grid .card-body {
  text-align: center;
}

.simlab-card-icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
}

.page-header-note {
  font-size: 0.85rem;
  color: var(--gray-500);
  max-width: 600px;
  margin: 0 auto;
}


/* Keterangan di bawah tombol kirim pada formulir kontak — menjelaskan bahwa
   pesan dikirim lewat aplikasi email pengunjung, bukan lewat server. */
.form-note {
  margin-top: 0.85rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #64748b;
}
.form-note a {
  color: #0f766e;
  text-decoration: underline;
  word-break: break-word;
}

/* ============================================================
   IKON GARIS (SVG SEBARIS)
   ============================================================
   Menggantikan 176 emoji yang sebelumnya dipakai sebagai ikon.
   Emoji digambar oleh sistem operasi, bukan oleh situs ini, sehingga
   pengguna Windows, Android, dan iPhone melihat bentuk yang berlainan
   untuk ikon yang sama — dan warnanya tidak dapat diselaraskan dengan
   palet situs. SVG sebaris tampil sama persis di semua perangkat,
   mewarisi warna lewat currentColor, dan tidak menambah permintaan
   jaringan sama sekali. */

.ico {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.135em;
  flex-shrink: 0;
  stroke-width: 1.75;
}

/* Ikon yang berdampingan dengan teks perlu jarak. Sebelumnya emoji
   menempel langsung ke teks ("Booking Lab" tanpa spasi) karena spasi di
   HTML ikut terpangkas. */
.btn .ico,
.nav-menu a .ico,
.dropdown-menu a .ico,
.badge .ico,
.footer-contact .ico,
.doc-action .ico { margin-right: 0.5em; }

.btn .ico { width: 1.05em; height: 1.05em; }

/* Ikon dalam kotak berwarna: lebih besar dan tanpa jarak, karena berdiri
   sendiri sebagai lambang, bukan pendamping teks. */
.icon-box .ico,
.doc-icon .ico,
.simlab-card-icon .ico,
.safety-card-icon .ico { width: 1.5rem; height: 1.5rem; margin: 0; }

.simlab-center-icon .ico { width: 2rem; height: 2rem; margin: 0; }

/* Kartu galeri & denah: ikon besar sebagai penanda tempat gambar. */
.placeholder-icon .ico,
.map-placeholder-icon .ico { width: 2.75rem; height: 2.75rem; stroke-width: 1.4; }

/* Avatar orang pada struktur organisasi. */
.avatar .ico,
.card-img .ico,
.osce-card-img .ico { width: 2rem; height: 2rem; margin: 0; }

/* Ikon mengikuti diameter avatarnya agar bobot visualnya sama di kedua ukuran. */
.org-card .avatar .ico { width: 2.1rem; height: 2.1rem; }
.org-sub-card .avatar .ico { width: 1.65rem; height: 1.65rem; }

/* Kontrol antarmuka: tombol menu dan kembali ke atas. */
.nav-toggle .ico { width: 1.5rem; height: 1.5rem; }
.back-to-top .ico { width: 1.25rem; height: 1.25rem; vertical-align: -0.2em; }

/* Panah dropdown lebih kecil dan tidak mencolok. */
.arrow .ico { width: 0.85em; height: 0.85em; opacity: 0.7; margin-left: 0.15em; }

/* Ikon di dalam judul mengikuti ukuran judulnya, sedikit diturunkan
   agar sejajar optis dengan huruf kapital. */
h1 .ico, h2 .ico, h3 .ico, h4 .ico {
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.4em;
  vertical-align: -0.09em;
}

/* Ikon di dalam tabel APD sejajar dengan teks tebal di sebelahnya. */
td strong .ico { margin-right: 0.45em; }