:root {
  --bg: #fdfcfa;
  --surface: #ffffff;
  --kartu: #ffffff;      /* latar kartu, membalik di mode gelap */
  --campur: #ffffff;     /* basis campuran warna, jadi gelap di mode gelap */
  --tinta-bar: #16222e;
  --ink: #2b3440;
  --ink-soft: #5a6675;
  --ink-muted: #66717f;
  --line: #eae6e0;
  --pastel-blue: #d7ebff;
  --pastel-mint: #ddf7e3;
  --pastel-butter: #fff6c7;
  --pastel-rose: #f5e5e0;
  --pastel-gray: #f2f2f2;
  --accent: #3e6fa3;
  --accent-dark: #2c5580;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--aksen-isi); color: #fff; text-decoration: none;
  padding: 10px 18px; border-radius: 0 0 10px 10px; font-size: 14px; font-weight: 600;
  transition: top .15s;
}
.skip-link:focus { top: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
}

/* Lebarnya disamakan persis dengan .ak-bar-isi dan    halaman Bedah Publikasi segaris dengan bilah navigasi di atasnya. Selisih
   dua puluh piksel saja sudah membuat halamannya terasa situs yang berbeda. */
.container { max-width: 964px; margin: 0 auto; padding: 0 26px; }

.hero-profile .peran span { color: #4a5a6d; }

/* Navigasi */
.nav { display: flex; gap: 2px; align-items: center; }
.nav > a, .nav-btn {
  padding: 8px 14px; border-radius: 999px; font-size: 14px; line-height: 1.4;
  color: var(--ink-soft); text-decoration: none; background: none; border: 0;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.nav > a:hover, .nav-btn:hover { background: rgba(44, 85, 128, 0.07); color: var(--accent-dark); }
.nav > a.active, .nav-group.active > .nav-btn { color: var(--accent-dark); font-weight: 600; background: rgba(44, 85, 128, 0.10); }
.nav-group { position: relative; }
.nav-btn .caret { font-size: 12px; margin-left: 4px; opacity: 0.7; }
.nav-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 196px; display: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px;
  box-shadow: 0 10px 28px rgba(28, 52, 80, 0.10); z-index: 60;
}
.nav-group.open .nav-menu { display: block; }
.nav-menu a {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: 14px; color: var(--ink-soft); text-decoration: none;
}
.nav-menu a:hover { background: var(--pastel-blue); color: var(--accent-dark); }
.nav-menu a.active { color: var(--accent-dark); font-weight: 600; }
.nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: 0; padding: 9px; cursor: pointer; }
.nav-toggle span { width: 20px; height: 2px; background: var(--ink); border-radius: 8px; }

@media (max-width: 920px) {
  .nav-toggle { display: flex; }
  .ak-bar-isi { padding-top: 8px; padding-bottom: 8px; min-height: 0; }
  .ak-bar .nav { margin-left: 0; }
  .nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 6px 0 12px; }
  .nav.open { display: flex; }
  .nav > a { padding: 10px 12px; border-radius: 12px; }
  .nav-btn {
    pointer-events: none; padding: 14px 12px 4px; color: var(--ink-muted);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700;
  }
  .nav-btn .caret { display: none; }
  .nav-menu, .ak-bar .nav-group.open .nav-menu.lebar {
    position: static; display: block; border: 0; box-shadow: none;
    padding: 0; min-width: 0; background: none;
  }
  .nav-menu a { padding: 10px 12px; border-radius: 12px; }
}

/* Hero */
.hero {
  position: relative; padding: 84px 0 68px; border-bottom: 1px solid var(--line);
  background-color: var(--pastel-blue);
  background-image: url(hero-akademik.webp?v=190cf221);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(102deg, rgba(253, 251, 247, 0.96) 0%, rgba(253, 251, 247, 0.90) 42%, rgba(250, 245, 238, 0.74) 72%, rgba(248, 242, 234, 0.62) 100%);
}
.hero > .container { position: relative; z-index: 1; }
.hero-flex { display: flex; gap: 44px; align-items: center; justify-content: space-between; }
.hero-flex > div:first-child { flex: 1; min-width: 0; }
.hero-profile { width: 240px; flex-shrink: 0; text-align: center; }
.hero-profile img {
  width: 176px; height: 176px; border-radius: 50%; object-fit: cover;
  border: 6px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 36px rgba(28, 58, 94, 0.18); margin-bottom: 16px;
}
.hero-profile .nama {
  font-family: var(--serif); font-size: 18px; font-weight: 600; color: #1c3a5e;
  text-decoration: none; display: inline-block; line-height: 1.4;
  border-bottom: 1px solid rgba(28, 58, 94, 0.28); padding-bottom: 2px;
}
.hero-profile .nama:hover { border-bottom-color: #1c3a5e; }
.hero-profile .peran {
  margin-top: 9px; font-size: 14px; line-height: 1.6; color: #43566d;
}

@media (max-width: 760px) {
  .hero-flex { flex-direction: column-reverse; align-items: flex-start; gap: 30px; }
  .hero-profile { width: 100%; text-align: left; }
  .hero-profile img { width: 130px; height: 130px; }
}
.hero .kicker {
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-dark); font-weight: 600; margin-bottom: 14px;
}
.hero h1 {
  font-family: var(--serif); font-size: clamp(30px, 4.5vw, 44px);
  line-height: 1.25; font-weight: 600; max-width: 700px; margin-bottom: 18px;
  color: #1c3a5e;
}
.hero p.lead { font-size: 18px; color: #33506b; max-width: 640px; }

.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* Sorotan di hero */
.hero-highlight {
  display: flex; gap: 12px; align-items: flex-start;
  max-width: 620px; margin-top: 20px; padding: 14px 18px;
  background: linear-gradient(135deg, rgba(226, 249, 232, 0.96), rgba(240, 252, 243, 0.94));
  border: 1px solid rgba(47, 125, 79, 0.22);
  border-left: 3px solid #2f7d4f;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(47, 125, 79, 0.09);
  font-size: 16px; line-height: 1.62; color: #33513f;
}
.hero-highlight svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: #2f7d4f; }
.hero-highlight strong { color: #1f5c3a; font-weight: 600; }
@media (max-width: 640px) { .hero-highlight { font-size: 14px; padding: 12px 14px; } }

/* Statistik ringkas */
.statbar {
  display: flex; flex-wrap: wrap; align-items: center;
  background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px; padding: 9px 8px; margin-top: 32px;
  width: fit-content; max-width: 100%;
  box-shadow: 0 6px 20px rgba(28, 58, 94, 0.07);
}
.statbar .s {
  padding: 1px 20px; font-size: 14px; color: #4a5c72; white-space: nowrap;
  border-right: 1px solid rgba(28, 58, 94, 0.13);
}
.statbar .s:last-child { border-right: 0; }
.statbar b {
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  color: var(--accent-dark); margin-right: 5px;
}
@media (max-width: 660px) {
  .statbar { border-radius: 12px; padding: 10px 6px; }
  .statbar .s { border-right: 0; padding: 3px 14px; }
}

/* Band: seksi berlatar warna */
/* Band dulu berlatar beige; kini menyatu dengan background halaman */
.band { background: transparent; border-top: 0; border-bottom: 0; margin-top: 8px; }
.band .section { padding: 40px 0 8px; }

/* Value grid */
.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.value { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px 22px 24px; }
.value .ico {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
}
.value .ico svg { width: 22px; height: 22px; }
.value h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; margin-bottom: 7px; }
.value p { font-size: 14px; color: var(--ink-soft); line-height: 1.65; }

/* Alur siklus publikasi */
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.flow-step {
  border-radius: 12px; padding: 22px 22px 24px; text-decoration: none; display: block;
  color: var(--ink); border: 1px solid transparent; transition: transform 0.15s ease;
}
.flow-step:hover { transform: translateY(-2px); }
.flow-step .n {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  display: block; margin-bottom: 10px; opacity: 0.75;
}
.flow-step .count { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.2; }
.flow-step h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; margin: 2px 0 7px; }
.flow-step p { font-size: 14px; line-height: 1.6; }
.flow-1 { background: var(--pastel-butter); color: #6b5a0a; }
.flow-1 h3, .flow-1 .count { color: #5a4c08; }
.flow-2 { background: var(--pastel-blue); color: #1c4e7d; }
.flow-2 h3, .flow-2 .count { color: #17456e; }
.flow-3 { background: var(--pastel-mint); color: #1d5c3a; }
.flow-3 h3, .flow-3 .count { color: #17512f; }
@media (max-width: 700px) { .flow { grid-template-columns: 1fr; } }

/* Sections */
.section { padding: 64px 0 56px; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 26px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.section-head h2 { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.section-head a { font-size: 14px; color: var(--accent-dark); text-decoration: none; }
.section-head a:hover { text-decoration: underline; }
.section-note { font-size: 14px; color: var(--ink-soft); max-width: 680px; margin: -10px 0 22px; }

/* Cards */
.card-grid { display: grid; gap: 22px; }
/* Dua lajur khusus untuk kartu yang isinya hanya teks dan tombol, seperti di
   halaman Template siap pakai. Kartu yang memuat sampul tetap satu lajur,
   karena gambar dan teksnya berdampingan dan butuh lebar penuh. */
.card-grid.dua { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.card-grid.dua .card-flex { display: block; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 28px 30px; display: block; text-decoration: none; color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
a.card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(28, 52, 80, 0.09); }
.card .meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.card .journal { font-size: 14px; color: var(--ink-muted); }
.card h3 { font-family: var(--serif); font-size: 18px; line-height: 1.4; font-weight: 600; margin-bottom: 8px; }
.card p.hook { font-size: 14px; color: var(--ink-soft); margin-bottom: 12px; }
.card .foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--ink-muted); }
.card .foot .read { color: var(--accent-dark); font-weight: 600; }

/* Etalase buku */
.book-grid { display: grid; gap: 24px; }
.book {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 24px 26px; display: flex; gap: 26px; align-items: flex-start;
}
.book-cover {
  width: 152px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
  box-shadow: 0 10px 26px rgba(28, 52, 80, 0.18); background: var(--pastel-gray);
}
.book-cover img { display: block; width: 100%; height: auto; }
.book-body { flex: 1; min-width: 0; }
.book-body h3 { font-family: var(--serif); font-size: 21px; line-height: 1.35; font-weight: 600; margin-bottom: 8px; }
.book-body .penulis { font-size: 14px; color: var(--ink-soft); margin-bottom: 12px; }
.book-body .penulis strong { color: var(--ink); font-weight: 600; }
.book-body p.ringkas { font-size: 14px; color: var(--ink-soft); margin-bottom: 14px; }
.book-meta {
  display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--ink-muted);
  border-top: 1px solid var(--line); padding-top: 12px;
}
.book-meta b { color: var(--ink-soft); font-weight: 600; }
@media (max-width: 620px) {
  .book { flex-direction: column; gap: 18px; }
  .book-cover { width: 130px; }
}

/* Badges */
.badge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.badge.q1 { background: #bcdcfa; color: #10375c; }
.badge.q2 { background: #d7ebff; color: #1c4e7d; }
.badge.q3 { background: #eaf4ff; color: #2a5d8f; }
.badge.sinta { background: var(--pastel-mint); color: #1d5c3a; }
.badge.status-terbit { background: var(--pastel-mint); color: #1d5c3a; }
.badge.status-revisi { background: var(--pastel-butter); color: #6b5a0a; }
.badge.status-proses { background: var(--pastel-gray); color: #55524a; }
.badge.baru { background: var(--pastel-rose); color: #8a3550; }

/* Paper detail layout */
.paper-head { padding: 48px 0 28px; border-bottom: 1px solid var(--line); }
.head-grid { display: flex; gap: 32px; align-items: flex-start; }
.head-grid .cover {
  width: 150px; flex-shrink: 0; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; background: var(--surface);
}
.head-grid .cover img { display: block; width: 100%; height: auto; }
.card-flex { display: flex; gap: 18px; align-items: flex-start; }
.card-flex > div:first-child { flex: 1; min-width: 0; }
.cover-sm {
  width: 92px; flex-shrink: 0; border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; background: var(--surface);
}
.cover-sm img { display: block; width: 100%; height: auto; }
@media (max-width: 620px) {
  .head-grid { flex-direction: column; }
  .head-grid .cover { width: 120px; }
  .card-flex { gap: 14px; }
  .cover-sm { width: 72px; }
}
@media (max-width: 430px) {
  .cover-sm { display: none; }
}
.paper-head .meta-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.paper-head .journal { font-size: 14px; color: var(--ink-muted); }
.paper-head h1 { font-family: var(--serif); font-size: clamp(28px, 3.8vw, 38px); line-height: 1.3; font-weight: 600; max-width: 760px; }
.paper-head .authors { margin-top: 14px; font-size: 16px; color: var(--ink-soft); }
.paper-head .authors strong { color: var(--ink); font-weight: 600; }
.paper-head .doi { margin-top: 6px; font-size: 14px; }
.paper-head .doi a { color: var(--accent-dark); }

.paper-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; padding: 36px 0 64px; }
.toc { position: sticky; top: 76px; align-self: start; font-size: 14px; }
.toc p.toc-title { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; margin-bottom: 10px; }
.toc a { display: block; padding: 5px 0 5px 12px; color: var(--ink-soft); text-decoration: none; border-left: 2px solid var(--line); }
.toc a:hover { color: var(--accent-dark); border-left-color: var(--accent); }

.prose h2 { font-family: var(--serif); font-size: clamp(21px, 2.2vw, 26px); font-weight: 600; margin: 40px 0 14px; scroll-margin-top: 84px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 18px; color: var(--ink); font-size: 16px; line-height: 1.72; }
.prose .callout {
  background: var(--pastel-blue); border-radius: 12px; padding: 18px 22px;
  margin: 20px 0; font-size: 16px; color: #1c4e7d;
}
.prose .placeholder {
  background: var(--pastel-butter); border: 1px dashed #e3d28a; border-radius: 12px;
  padding: 18px 22px; margin: 16px 0; font-size: 14px; color: #6b5a0a;
}

/* Timeline */
.timeline { display: flex; align-items: flex-start; gap: 0; margin: 26px 0; overflow-x: auto; padding-bottom: 6px; }
.tl-step { flex: 1; min-width: 96px; text-align: center; position: relative; }
.tl-step .dot { width: 12px; height: 12px; border-radius: 50%; background: #7fb5d9; margin: 0 auto 8px; position: relative; z-index: 2; }
.tl-step.final .dot { background: #4e9b72; outline: 3px solid var(--pastel-mint); }
.tl-step:not(:last-child)::after {
  content: ""; position: absolute; top: 5px; left: 50%; width: 100%; height: 2px; background: var(--line); z-index: 1;
}
.tl-step .tl-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.tl-step .tl-date { font-size: 12px; color: var(--ink-muted); }

/* Accordion */
details.reviewer {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 0; margin-bottom: 10px; overflow: hidden;
}
details.reviewer summary {
  cursor: pointer; list-style: none; padding: 14px 18px; font-size: 14px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
details.reviewer summary::-webkit-details-marker { display: none; }
details.reviewer summary .hint { font-size: 14px; color: var(--ink-muted); font-weight: 400; }
details.reviewer .content { padding: 0 18px 16px; font-size: 14px; color: var(--ink-soft); }

/* Profile block */
.profile { display: flex; gap: 24px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 26px 28px; margin: 8px 0 24px; flex-wrap: wrap; }
.profile .photo {
  width: 150px; height: 150px; border-radius: 50%; background: var(--pastel-gray);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 44px; font-weight: 600; color: #4a3d8f;
  flex-shrink: 0; overflow: hidden;
}
.profile .photo img { width: 100%; height: 100%; object-fit: cover; }
.profile p { font-size: 14px; color: var(--ink-soft); max-width: 560px; margin: 0; }
.profile-peran { font-family: var(--display, var(--sans)); font-weight: 700; font-size: 16.5px; color: var(--ink) !important; margin: 0 0 5px !important; }
.profile-sertif { font-size: 14px; color: var(--ink-soft); }

/* Access section */
.access-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 20px; }
.btn {
  display: inline-block; text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 10px 20px; border-radius: 999px; border: 1px solid transparent;
}
.btn.primary { background: var(--aksen-isi); color: #fff; }
.btn.primary:hover { background: #23456b; }
.btn.solid { background: var(--aksen-isi); color: #fff; }
.btn.solid:hover { background: #23456b; }
.btn.outline { background: var(--surface); color: var(--accent-dark); border-color: var(--accent); }
.btn.outline:hover { background: #f4f8fc; }
.btn.ghost { background: var(--surface); color: var(--accent-dark); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--accent); }
.access-note {
  background: var(--pastel-butter); border-radius: 12px; padding: 16px 20px;
  margin: 14px 0 20px; font-size: 14px; color: #6b5a0a;
}
.access-note a { color: #7a4a12; font-weight: 600; }
/* Footer */
.site-footer { border-top: 1px solid #e2e2e2; margin-top: 28px; padding: 15px 0 21px; font-size: 14px; color: var(--ink-soft); background: #f0f0f0; }
.site-footer a { color: var(--accent-dark); font-weight: 600; }

/* Baris aksi: cetak dan salin sitasi */
.aksi-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 4px; }
.aksi-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--accent-dark);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px;
}
.aksi-btn:hover { border-color: var(--accent); background: #f4f8fc; }
.aksi-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.aksi-btn.sukses { background: var(--pastel-mint); border-color: #9fd9b4; color: #1d5c3a; }
.sitasi-box {
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  padding: 16px 18px; margin: 12px 0 0;
}
.sitasi-tab { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.sitasi-tab button {
  cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 6px 13px; border-radius: 8px; border: 1px solid var(--line);
  background: none; color: var(--ink-soft);
}
.sitasi-tab button.aktif { background: var(--aksen-isi); color: #fff; border-color: var(--accent-dark); }
.sitasi-teks {
  font-family: var(--mono, ui-monospace, "Cascadia Code", Consolas, monospace);
  font-size: 14px; line-height: 1.65; color: var(--ink);
  white-space: pre-wrap; word-break: break-word; margin: 0;
}

/* Daftar isi paper melipat menjadi baris mendatar begitu kolom bacanya mulai
   sempit. Ambangnya 860 piksel, bukan 760, karena daftar isi selebar 220 piksel
   ditambah jarak 40 piksel memakan porsi yang makin besar seiring layar
   mengecil: pada 768 piksel badan papernya tinggal 389 piksel, terlalu sempit
   untuk dibaca nyaman apalagi untuk diratakan kiri-kanan. */
@media (max-width: 860px) {
  .paper-body { grid-template-columns: 1fr; gap: 8px; }
  .toc { position: static; display: flex; flex-wrap: wrap; gap: 4px 14px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
  .toc a { border-left: none; padding: 2px 0; }
  .toc p.toc-title { width: 100%; }
}

@media (max-width: 760px) {
  .hero { padding: 40px 0 28px; }
}

/* ============================================================
   Gaya cetak: hasilkan PDF bersih lewat tombol Cetak browser
   ============================================================ */
@media print {
  @page { size: A4; margin: 18mm 16mm 20mm; }

  html { scroll-behavior: auto; }
  body {
    background: #fff !important; color: #000;
    font-size: 10.5pt; line-height: 1.55;
  }
  .container { max-width: 100%; padding: 0; }

  /* sembunyikan elemen antarmuka */
    .hero::before { display: none !important; }
  .hero-profile, .hero .kicker { display: none !important; }
  .hero h1 { font-size: 19pt !important; color: #000 !important; margin-bottom: 6pt; }
  .hero .lead { font-size: 11pt; color: #333; }

  /* kepala halaman paper */
  .paper-head { padding: 0 0 10pt; border-bottom: 1pt solid #999; }
  .head-grid { display: block; }
  .head-grid .cover { display: none !important; }
  .paper-head h1 { font-size: 17pt; color: #000; }
  .paper-head .authors, .paper-head .doi { font-size: 9.5pt; color: #333; }
  .paper-body { display: block; padding: 12pt 0 0; }

  /* buka semua akordion supaya isinya ikut tercetak */
  details.reviewer { border: 1pt solid #bbb; page-break-inside: avoid; }
  details.reviewer > div.content { display: block !important; }
  details.reviewer summary { font-weight: 700; list-style: none; }
  details.reviewer summary .hint { color: #555; }

  /* teks dan kartu */
  .prose h2 { font-size: 13pt; margin: 14pt 0 5pt; page-break-after: avoid; }
  .prose h3 { page-break-after: avoid; }
  .prose p { color: #000; orphans: 3; widows: 3; }
  .callout, .access-note {
    background: #f2f2f2 !important; color: #000 !important;
    border: 1pt solid #ccc; page-break-inside: avoid;
  }
  .card, .book, .value, .sitasi-box {
    border: 1pt solid #bbb !important; box-shadow: none !important;
    page-break-inside: avoid; background: #fff !important;
  }
  .card-flex { display: block; }
  .cover-sm { display: none !important; }
  .book-cover { width: 32mm; }
  .badge { border: 1pt solid #999; background: none !important; color: #000 !important; }
  .band { background: none !important; border: 0; }
  .section { padding: 10pt 0 0; }
  .section-head h2 { font-size: 14pt; }
  .timeline { page-break-inside: avoid; }
  .tl-step .dot { background: #000 !important; outline: none !important; }

  /* tampilkan alamat tautan agar berguna di versi cetak */
  a { color: #000; text-decoration: none; }
  .prose a[href^="http"]::after,
  .book-meta a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #555; }

  img { max-width: 100% !important; page-break-inside: avoid; }
  
}

/* Tombol bagikan */
.bagikan { display: inline-flex; gap: 6px; align-items: center; }
.bagikan a, .bagikan button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  text-decoration: none; font-family: inherit; padding: 0;
}
.bagikan a:hover, .bagikan button:hover { border-color: var(--accent); color: var(--accent-dark); background: #f4f8fc; }
.bagikan svg { width: 17px; height: 17px; }
.bagikan .label { font-size: 14px; color: var(--ink-muted); margin-right: 4px; }

/* Daftar isi mengikuti posisi baca */
.toc a.kini {
  color: var(--accent-dark); font-weight: 600;
  border-left-color: var(--accent); background: rgba(44, 85, 128, 0.05);
}

/* Halaman 404 */
.nf { text-align: center; padding: 70px 0 40px; }
.nf .kode {
  font-family: var(--serif); font-size: 72px; font-weight: 600;
  color: var(--accent-dark); line-height: 1; margin-bottom: 10px;
}
.nf h1 { font-family: var(--serif); font-size: 32px; font-weight: 600; margin-bottom: 12px; }
.nf p { font-size: 16px; color: var(--ink-soft); max-width: 520px; margin: 0 auto 26px; }
.nf .cta-row { justify-content: center; }

/* ============================================================
   Etalase kolaborasi: linimasa kronologis, bukan kartu bedah
   ============================================================ */
.tahun-blok { margin-bottom: 8px; }
.tahun-label {
  display: flex; align-items: center; gap: 14px; margin: 34px 0 18px;
}
.tahun-label .angka {
  font-family: var(--serif); font-size: 32px; font-weight: 600;
  color: var(--accent-dark); line-height: 1;
}
.tahun-label .garis { flex: 1; height: 1px; background: var(--line); }
.tahun-label .hitung { font-size: 14px; color: var(--ink-muted); white-space: nowrap; }

.kolab-list { border-left: 2px solid var(--line); padding-left: 0; margin-left: 8px; }
.kolab {
  position: relative; padding: 18px 0 18px 28px;
  border-bottom: 1px solid var(--line);
}
.kolab:last-child { border-bottom: 0; }
.kolab::before {
  content: ""; position: absolute; left: -7px; top: 27px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent);
}
.kolab:hover::before { background: var(--accent); }
.kolab .tgl {
  font-size: 12px; color: var(--ink-muted); letter-spacing: 0.04em;
  text-transform: uppercase; font-weight: 600; margin-bottom: 5px;
}
.kolab h3 {
  font-family: var(--serif); font-size: 18px; line-height: 1.4;
  font-weight: 600; margin-bottom: 7px;
}
.kolab h3 a { color: var(--ink); text-decoration: none; }
.kolab h3 a:hover { color: var(--accent-dark); text-decoration: underline; }
.kolab .tim { font-size: 14px; color: var(--ink-soft); margin-bottom: 9px; line-height: 1.6; }
.kolab .tim strong { color: var(--accent-dark); font-weight: 600; }
.kolab .terbitan {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  font-size: 14px; color: var(--ink-muted);
}
.kolab .terbitan .jurnal { color: var(--ink-soft); font-weight: 600; }
.kolab .terbitan a {
  color: var(--accent-dark); font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.kolab .terbitan a:hover { text-decoration: underline; }
.kolab .terbitan a svg { width: 12px; height: 12px; }
.badge.kutip { background: var(--pastel-blue); color: #1c4e7d; }
.badge.jenis { background: var(--pastel-gray); color: #55524a; }
@media (max-width: 600px) {
  .kolab { padding-left: 20px; }
  .tahun-label .angka { font-size: 26px; }
}

/* ============================================================
   Panduan memilih jurnal
   ============================================================ */
.tabel-wrap { overflow-x: auto; margin: 20px 0 8px; }
table.banding {
  width: 100%; border-collapse: collapse; font-size: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden;
}
table.banding th, table.banding td {
  padding: 12px 15px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
table.banding thead th {
  background: var(--pastel-blue); color: #1c4e7d; font-weight: 700;
  font-size: 14px; white-space: nowrap;
}
table.banding tbody tr:last-child td { border-bottom: 0; }
table.banding td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
table.banding .contoh { font-size: 14px; color: var(--ink-muted); display: block; margin-top: 3px; }

/* Daftar tanda bahaya */

.tanda { display: grid; gap: 14px; counter-reset: td; margin: 18px 0 8px; }
@media (min-width: 900px) { .tanda { grid-template-columns: 1fr 1fr; } }

.tanda-item {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 22px 20px 22px;
}
.tanda-item .no::after {
  content: ""; display: block; width: 26px; height: 2px;
  background: #d98b6a; border-radius: 8px; margin-top: 7px;
}
@media (max-width: 640px) { .tanda-item { padding: 17px 17px; } }
.tanda-item .no {
  display: block;
  font-family: var(--serif); font-size: 16px; font-weight: 600;
  color: #a2543a; letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.tanda-item h3 { font-size: 16px; font-weight: 600; margin-bottom: 5px; color: var(--ink); }
.tanda-item p { font-size: 14px; color: var(--ink-soft); line-height: 1.65; margin: 0; }

/* Langkah verifikasi */
.langkah { counter-reset: lg; display: grid; gap: 14px; margin: 20px 0 8px; }
@media (min-width: 900px) { .langkah { grid-template-columns: 1fr 1fr; } }
.langkah-item {
  position: relative; padding: 16px 18px 16px 56px;
  background: var(--pastel-mint); border-radius: 12px; color: #1d5c3a;
}
.langkah-item::before {
  counter-increment: lg; content: counter(lg);
  position: absolute; left: 18px; top: 15px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #1d5c3a; color: #fff; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.langkah-item h3 { font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.langkah-item p { font-size: 14px; line-height: 1.6; color: #2c6b48; }
.langkah-item a { color: #14472c; font-weight: 600; }

/* ===== Glosarium ===== */
.hero-tipis { padding-top: 46px; padding-bottom: 34px; }
.hero-tipis .lead { max-width: 720px; }

.glos-wrap { padding: 26px 0 10px; }

.glos-tool {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.glos-search {
  position: relative; display: flex; align-items: center; flex: 1 1 340px; max-width: 460px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 0 12px 0 14px; transition: border-color .15s, box-shadow .15s;
}
.glos-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(62, 111, 163, 0.14); }
.glos-search svg { flex: none; width: 17px; height: 17px; color: var(--ink-muted); }
.glos-search input {
  flex: 1; border: 0; outline: 0; background: none;
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  padding: 11px 8px;
}
.glos-search input::-webkit-search-cancel-button { display: none; }
#glos-hapus {
  border: 0; background: none; cursor: pointer; color: var(--ink-muted);
  font-size: 21px; line-height: 1; padding: 2px 4px; border-radius: 50%;
}
#glos-hapus:hover { color: var(--accent-dark); background: var(--pastel-gray); }
.glos-hitung { font-size: 14px; color: var(--ink-muted); margin: 0; }

.glos-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.glos-chip {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--pastel-blue); color: #2b4c70; text-decoration: none;
  font-size: 14px; font-weight: 500; border: 1px solid rgba(44, 85, 128, 0.12);
}
.glos-chip:hover { background: #c7e2fb; }

.glos-group { margin-bottom: 34px; scroll-margin-top: 84px; }
.glos-group > h2 {
  font-family: var(--serif); font-size: 21px; font-weight: 600;
  color: var(--accent-dark); margin-bottom: 5px;
}
.glos-intro { font-size: 14px; color: var(--ink-soft); max-width: 680px; margin-bottom: 16px; }

.glos-list { display: grid; gap: 16px; }
@media (min-width: 900px) { .glos-list { grid-template-columns: 1fr 1fr; } }

.glos-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 15px 17px 16px;
}
.glos-item h3 {
  font-family: var(--sans); font-size: 16px; font-weight: 600;
  color: var(--accent-dark); margin-bottom: 6px;
}
.glos-alias {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  background: var(--pastel-butter); color: #6b5a0a;
  font-size: 12px; font-weight: 500; vertical-align: middle;
}
.glos-item p { font-size: 14px; line-height: 1.66; color: var(--ink-soft); margin: 0; }

.glos-kosong {
  background: var(--pastel-butter); color: #6b5a0a; border-radius: 12px;
  padding: 14px 17px; font-size: 14px; margin-bottom: 24px; max-width: 680px;
}

.glos-tutup {
  margin: 8px 0 4px; padding: 20px 22px; border-radius: 12px;
  background: var(--pastel-mint); border: 1px solid rgba(47, 125, 79, 0.16);
}
.glos-tutup p { font-size: 14px; color: #33513f; margin-bottom: 15px; max-width: 660px; }
.glos-tutup a { color: #1f5c3a; }
.glos-lanjut { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .glos-tool { gap: 10px; }
  .glos-search { flex-basis: 100%; max-width: none; }
  .glos-item { padding: 14px 15px; }
}
@media print {
  .glos-tool, .glos-chips, .glos-lanjut, .glos-kosong { display: none; }
  .glos-list { grid-template-columns: 1fr; gap: 6pt; }
  .glos-item { border: 0; padding: 0 0 6pt; break-inside: avoid; }
}

/* ===== Jalur belajar (Mulai dari sini) ===== */
.jalur-wrap { padding: 30px 0 12px; }
.jalur {
  margin-bottom: 26px; padding: 22px 24px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.jalur > h2 {
  font-family: var(--serif); font-size: 21px; font-weight: 600;
  color: var(--accent-dark); margin-bottom: 6px; line-height: 1.35;
}
.jalur-intro { font-size: 14px; color: var(--ink-soft); max-width: 700px; margin-bottom: 18px; }
.jalur-list { display: grid; gap: 14px; }
@media (min-width: 940px) { .jalur-list { grid-template-columns: 1fr 1fr; } }

.jalur-langkah {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 13px 15px; border-radius: 12px; text-decoration: none;
  background: var(--pastel-gray); border: 1px solid transparent;
  transition: background .15s, border-color .15s, transform .15s;
}
.jalur-langkah:hover {
  background: var(--pastel-blue); border-color: rgba(44, 85, 128, 0.18);
  transform: translateY(-1px);
}
.jalur-langkah .nomor {
  flex: none; width: 25px; height: 25px; border-radius: 50%;
  background: var(--aksen-isi); color: #fff;
  font-size: 14px; font-weight: 600; line-height: 25px; text-align: center;
}
.jalur-langkah .isi { display: block; }
.jalur-langkah strong {
  display: block; font-size: 16px; font-weight: 600;
  color: var(--accent-dark); margin-bottom: 3px;
}
.jalur-langkah .isi > span { display: block; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

@media (max-width: 640px) {
  .jalur { padding: 18px 16px 20px; }
  .jalur > h2 { font-size: 18px; }
}
@media print {
  .jalur-langkah { background: none; border: 0; padding: 0 0 5pt; break-inside: avoid; }
  .jalur-list { grid-template-columns: 1fr; }
  .jalur { border: 0; padding: 0; }
}

/* Penanda menu Mulai dari Sini */

/* Rapatkan hero di layar ponsel supaya konten cepat terlihat */
@media (max-width: 760px) {
  .hero-flex { gap: 20px; }
  .hero .kicker { margin-bottom: 9px; font-size: 12px; }
  .hero h1 { margin-bottom: 12px; line-height: 1.2; }
  .hero p.lead { font-size: 16px; line-height: 1.6; }
  .hero-profile img { width: 104px; height: 104px; }
  .hero-profile .nama { font-size: 18px; }
  .hero-profile .peran { font-size: 14px; line-height: 1.55; }
  .hero-highlight { margin-top: 15px; }
  .cta-row { margin-top: 18px; gap: 9px; }
  .statbar { margin-top: 20px; }
}
@media (max-width: 480px) {
  .hero { padding: 30px 0 24px; }
  .statbar .s { padding: 2px 12px; font-size: 14px; }
  .statbar b { font-size: 18px; }
}

/* Sasaran sentuh minimal 24 piksel sesuai WCAG 2.2 */
.site-footer a, .section-head a, .card .read { display: inline-block; padding: 4px 0; }

/* Teks yang hanya dibaca pembaca layar */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.prose { max-width: none; }
.paper-body > * { min-width: 0; }

/* Ringkasan kartu berhenti di lebar baca yang nyaman, judul dan sampul tidak bergeser */
.card p.hook { max-width: 62ch; }

/* Ruang napas dirapatkan di layar kecil supaya tidak boros gulir */
@media (max-width: 760px) {
  .section, .band .section { padding: 44px 0 38px; }
  .section-head { margin-bottom: 20px; }
  .card { padding: 20px 18px; }
  .card-grid { gap: 14px; }
  .book-grid { gap: 16px; }
}

/* ===== Latar rak buku pada seksi buku di beranda ===== */
.band-buku {
  position: relative;
  background-color: #f7f4ed;
  background-image: url(latar-buku.webp?v=00f4e19e);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.band-buku::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(250, 247, 241, 0.91) 0%,
    rgba(250, 247, 241, 0.84) 45%,
    rgba(250, 247, 241, 0.91) 100%);
}
.band-buku .book { background: rgba(255, 255, 255, 0.95); }
.band-buku .section-note { color: #4a5666; }

@media (max-width: 760px) {
  .band-buku { background-attachment: scroll; }
  .band-buku::before { background: rgba(250, 247, 241, 0.92); }
}
@media print {
  .band-buku { background-image: none !important; }
  .band-buku::before { display: none; }
}

/* ===== Halaman Tanya Jawab ===== */
.tj-grup { margin-bottom: 34px; scroll-margin-top: 84px; }
.tj-grup > h2 {
  font-family: var(--serif); font-size: 21px; font-weight: 600;
  color: var(--accent-dark); margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.tj-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; margin-bottom: 10px; overflow: hidden;
}
.tj-item > summary {
  cursor: pointer; list-style: none; padding: 16px 46px 16px 20px;
  font-size: 16px; font-weight: 600; color: var(--accent-dark);
  position: relative; line-height: 1.5;
}
.tj-item > summary::-webkit-details-marker { display: none; }
.tj-item > summary::after {
  content: ""; position: absolute; right: 20px; top: 22px;
  width: 9px; height: 9px; border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted); transform: rotate(45deg);
  transition: transform .18s;
}
.tj-item[open] > summary::after { transform: rotate(-135deg); top: 26px; }
.tj-item > summary:hover { background: var(--pastel-gray); }
.tj-jawab { padding: 0 20px 18px; border-top: 1px solid var(--line); }
.tj-jawab p { font-size: 14px; line-height: 1.7; color: var(--ink-soft); margin-top: 14px; }
.tj-lanjut a { font-size: 14px; font-weight: 600; color: var(--accent-dark); text-decoration: none; }
.tj-lanjut a:hover { text-decoration: underline; }

.tj-kontak { margin-top: 40px; padding-top: 30px; border-top: 2px solid var(--line); }
.tj-kontak > h2 { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--accent-dark); margin-bottom: 8px; }
.tj-intro { font-size: 16px; color: var(--ink-soft); max-width: 680px; margin-bottom: 20px; line-height: 1.7; }

.tj-batas {
  background: var(--pastel-butter); border: 1px solid rgba(160, 130, 20, 0.2);
  border-radius: 12px; padding: 22px 24px;
}
.tj-batas h3 { font-size: 16px; font-weight: 700; color: #6b5a0a; margin-bottom: 12px; }
.tj-batas ul { margin: 0 0 14px; padding-left: 20px; }
.tj-batas li { font-size: 14px; line-height: 1.7; color: #5c4e08; margin-bottom: 8px; }
.tj-batas p { font-size: 14px; line-height: 1.65; color: #5c4e08; margin: 0; }

@media (max-width: 640px) {
  .tj-item > summary { padding: 14px 40px 14px 16px; font-size: 16px; }
  .tj-jawab { padding: 0 16px 16px; }
  .tj-batas { padding: 18px 18px; }
}
@media print {
  .tj-item { border: 0; break-inside: avoid; }
  .tj-jawab { display: block !important; }
}

/* ===== Tombol kontak melayang ===== */

/* keterangan muncul saat disentuh atau difokus */

@media (max-width: 640px) {
        }

/* Pemberitahuan singkat setelah alamat email tersalin */
@media print {  }

/* ===== Panduan menulis bagian per bagian ===== */
.mb-kunci {
  background: var(--pastel-blue); border: 1px solid rgba(44, 85, 128, 0.18);
  border-radius: 12px; padding: 20px 24px; margin-bottom: 34px;
}
.mb-kunci p { font-size: 16px; line-height: 1.7; color: #1c4e7d; margin: 0; }

.mb-bagian { margin-bottom: 40px; scroll-margin-top: 84px; }
.mb-kepala { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.mb-nomor {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--aksen-isi); color: #fff;
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  line-height: 34px; text-align: center;
}
.mb-kepala h2 { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--accent-dark); margin-bottom: 4px; }
.mb-intro { font-size: 14px; color: var(--ink-soft); margin: 0; }

.mb-butir {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 22px 24px; margin-bottom: 14px;
}
.mb-butir h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.mb-dicari { font-size: 14px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 16px; }

.mb-bukti {
  margin: 0 0 14px; padding: 14px 18px;
  background: var(--pastel-gray); border-left: 3px solid #b9a06a; border-radius: 0 10px 10px 0;
}
.mb-bukti blockquote { margin: 0 0 8px; font-size: 14px; line-height: 1.68; color: #4a4335; }
.mb-bukti figcaption { font-size: 12px; font-weight: 600; color: #6f6349; letter-spacing: 0.02em; }

.mb-langkah {
  background: var(--pastel-mint); border: 1px solid rgba(47, 125, 79, 0.18);
  border-radius: 12px; padding: 14px 18px;
}
.mb-label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #1d5c3a; margin-bottom: 6px;
}
.mb-langkah p { font-size: 14px; line-height: 1.7; color: #2a4d3a; margin: 0; }

@media (max-width: 640px) {
  .mb-butir { padding: 18px 17px; }
  .mb-kunci { padding: 17px 18px; }
  .mb-kepala { gap: 12px; }
  .mb-nomor { width: 30px; height: 30px; line-height: 30px; font-size: 16px; }
  .mb-kepala h2 { font-size: 21px; }
}
@media print {
  .mb-butir, .mb-bukti, .mb-langkah { border: 0; break-inside: avoid; }
  .mb-kunci { border: 0; }
  .glos-chips, .glos-lanjut { display: none; }
}

/* ============================================================
   Portal: beranda utama dan bagian mata kuliah
   ============================================================ */

/* Daftar ringkas mata kuliah di beranda */

/* Kartu mata kuliah di halaman indeks */

/* Tautan cepat ke bagian Bedah Publikasi */

/* Bagian yang belum dibuka */

/* Daftar enam belas pertemuan */

/* Halaman Bimbingan */
.bm-grid {
  display: grid; gap: 18px; margin-bottom: 34px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.bm-kartu {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 22px 24px;
}
.bm-jenjang {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--accent-dark);
  background: var(--pastel-blue); border-radius: 999px;
  padding: 4px 12px; margin-bottom: 12px;
}
.bm-kartu h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.bm-kartu p { font-size: 14px; color: var(--ink-soft); line-height: 1.65; }
.bm-segera {
  background: var(--pastel-butter); border-radius: 12px;
  padding: 24px 26px; margin: 34px 0 26px;
}
.bm-segera b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.bm-segera p { font-size: 14px; color: #5c4a1f; line-height: 1.7; }
.bm-segera p + p { margin-top: 10px; }

/* Tautan unduh materi per pertemuan */
.pk-unduh {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  color: #1f5c33; background: var(--pastel-mint);
  border-radius: 999px; padding: 5px 14px; white-space: nowrap;
  transition: background 0.15s ease;
}
.pk-unduh:hover { background: #c9efd3; }
.pk-unduh span { font-weight: 400; font-size: 12px; opacity: 0.85; }

/* ============================================================
   Beranda portal sebagai etalase pengetahuan
   ============================================================ */

/* Bagian dengan ruang bernapas lebih longgar dari halaman biasa */

/* Hero */

/* Rak mata kuliah */


/* Dua pintu besar */

/* ============================================================
   Rak mata kuliah dengan sampul dari slide judul materinya
   ============================================================ */
.mk-rak {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
}
.mk-ubin {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
  text-decoration: none; color: var(--ink);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.mk-ubin:hover {
  transform: translateY(-4px); border-color: var(--accent);
  box-shadow: 0 16px 36px rgba(28, 52, 80, 0.14);
}
.mk-sampul { display: block; background: var(--pastel-gray); line-height: 0; }
.mk-sampul img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mk-isi { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.mk-isi b { font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.35; }
.mk-kode { font-size: 12px; color: var(--ink-muted); letter-spacing: 0.03em; }
.mk-desk { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin-top: 2px; }
.mk-status {
  margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--accent-dark);
}

/* Sampul di kepala halaman mata kuliah */
.mk-hero .mk-hero-sampul {
  display: block; width: 100%; max-width: 560px; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 12px; margin-bottom: 26px;
  box-shadow: 0 14px 34px rgba(28, 52, 80, 0.16);
}

@media (max-width: 560px) {
  .mk-rak { gap: 16px; grid-template-columns: 1fr; }
}

/* Penyaring semester di rak mata kuliah */
.mk-saring {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.mk-saring-label { font-size: 14px; font-weight: 600; color: var(--ink-muted); margin-right: 2px; }
.mk-chip {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--ink-soft); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 17px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mk-chip:hover { border-color: var(--accent); }
.mk-chip.aktif { color: var(--accent-dark); background: var(--pastel-blue); border-color: transparent; }
.mk-saring-hasil { margin-left: auto; font-size: 14px; color: var(--ink-muted); }
.mk-ubin[hidden] { display: none; }

@media (max-width: 560px) {
  .mk-saring-hasil { margin-left: 0; width: 100%; }
}

/* ============================================================
   Timeline pertemuan, dengan garis menurun dan sampul materi
   ============================================================ */
.tl { list-style: none; padding: 0; margin: 0 0 30px; position: relative; }

/* garis yang mengalir dari pertemuan pertama sampai terakhir */
.tl::before {
  content: ""; position: absolute; top: 18px; bottom: 18px; left: 21px;
  width: 2px; background: linear-gradient(180deg,
    var(--pastel-blue) 0%, var(--line) 55%, var(--line) 100%);
}

.tl-butir {
  position: relative; display: flex; gap: 18px; align-items: flex-start;
  padding: 0 0 26px 60px;
}
.tl-butir:last-child { padding-bottom: 0; }

/* simpul bernomor yang duduk di atas garis */
.tl-no {
  position: absolute; left: 0; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink-muted); background: var(--surface);
  border: 2px solid var(--line);
}
.tl-ada .tl-no { color: var(--accent-dark); background: var(--pastel-blue); border-color: transparent; }

/* sampul materi di depan tiap pertemuan */
.tl-sampul {
  flex-shrink: 0; display: block; width: 160px; border-radius: 12px;
  overflow: hidden; line-height: 0; background: var(--pastel-gray);
  box-shadow: 0 6px 18px rgba(28, 52, 80, 0.13);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.tl-sampul img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.tl-sampul:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(28, 52, 80, 0.2); }

.tl-teks { flex: 1; min-width: 0; padding-top: 2px; }
.tl-teks b {
  display: block; font-family: var(--serif); font-size: 18px;
  font-weight: 600; line-height: 1.4; margin-bottom: 10px;
}
.tl-butir .pk-unduh { margin-top: 2px; }

@media (max-width: 620px) {
  .tl::before { left: 17px; }
  .tl-butir { flex-direction: column; gap: 12px; padding-left: 48px; padding-bottom: 22px; }
  .tl-no { width: 36px; height: 36px; font-size: 12px; }
  .tl-sampul { width: 100%; max-width: 280px; }
}

/* ============================================================
   Pola situs akademik personal.

   Geometrinya diukur langsung dari robertavaltorta.com: bilah abu
   setinggi 64px, spanduk selebar layar setinggi 320px, potret
   persegi 210px yang menumpuk 105px ke atas spanduk, lalu dua
   kolom 210px dan 678px dengan jarak 24px. Skala hurufnya sama,
   yaitu 48px untuk judul, 20px untuk paragraf pembuka, dan 16px
   untuk teks isi. Warna aksennya tetap navy, karena itu warna
   merek situs ini dan sudah dipakai di seluruh halaman lain.
   ============================================================ */
body.ak { background: var(--surface); }

/* Bilah nama di paling atas */
.ak-bar { background: #f0f0f0; border-bottom: 1px solid #e2e2e2; position: sticky; top: 0; z-index: 40; }
.ak-bar-isi {
  max-width: 964px; margin: 0 auto; padding: 0 26px;
  display: flex; align-items: center; gap: 16px; min-height: 64px; flex-wrap: wrap;
}
.ak-nama {
  font-family: var(--sans); font-size: 21px; font-weight: 700; letter-spacing: -0.012em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.ak-nama:hover { color: var(--accent-dark); }

/* Isi bilahnya memakai mesin .nav yang lama, termasuk menu turun dan tombol
   hamburgernya, supaya tidak ada JavaScript baru yang perlu ditulis. Yang
   diubah di sini hanya penampilannya agar cocok dengan bilah abu. */
.ak-bar .nav { margin-left: auto; gap: 1px; }
.ak-bar .nav > a, .ak-bar .nav-btn {
  padding: 7px 9px; border-radius: 8px; font-size: 14px; color: #212121;
}
.ak-bar .nav > a:hover, .ak-bar .nav-btn:hover { background: rgba(44, 85, 128, 0.09); }
.ak-bar .nav > a.active, .ak-bar .nav-group.active > .nav-btn {
  color: var(--accent-dark); font-weight: 600; background: rgba(44, 85, 128, 0.13);
}
.ak-bar /* Menu Bedah Publikasi isinya sepuluh butir. Dua lajur membuatnya terbaca
   sekali pandang, bukan menjulur panjang sampai keluar layar. */
.ak-bar .nav-group.open .nav-menu.lebar {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 4px; min-width: 396px;
}
.ak-bar .nav-menu.lebar a { white-space: nowrap; }

/* Spanduk selebar layar */
/* sisi kiri diredupkan tipis supaya potret yang menumpuk tetap terbaca */

/* Dua kolom */
.ak-wadah {
  max-width: 964px; margin: 0 auto; padding: 0 26px 80px;
  display: grid; gap: 24px; grid-template-columns: 210px minmax(0, 1fr);
  align-items: start;
}

/* Kolom kiri: identitas dan kontak.
   z-index perlu dinaikkan supaya potret tampil utuh. Tanpa itu spanduk yang
   ber-position relative akan dilukis di atasnya dan memotong bagian atas foto. */
.ak-sisi { margin-top: -105px; position: relative; z-index: 2; }
.ak-potret {
  /* height perlu dikembalikan ke auto, karena atribut height pada tag img
     terhitung sebagai petunjuk gaya dan itu mematikan aspect-ratio */
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border: 6px solid var(--surface); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(28, 52, 80, 0.20); margin-bottom: 16px;
}
.ak-sisi-peran { font-size: 16px; color: var(--ink); line-height: 1.5; margin-bottom: 16px; }
.ak-sisi-lembaga { font-size: 16px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 20px; }
.ak-tautan { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 11px; }
.ak-tautan li { display: flex; align-items: center; gap: 10px; }
.ak-tautan svg {
  flex-shrink: 0; width: 17px; height: 17px; fill: none;
  stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.ak-tautan a { font-size: 16px; color: var(--accent); text-decoration: none; }
.ak-tautan a:hover { text-decoration: underline; }
.ak-sisi-kutip {
  font-size: 14px; font-style: italic; color: var(--ink-soft); line-height: 1.6;
  padding-top: 16px; border-top: 1px solid var(--line);
}

/* Kolom kanan: isi */
.ak-utama { padding-top: 48px; }
.ak-utama h1 {
  font-family: var(--display, var(--sans)); font-size: clamp(32px, 5vw, 46px); font-weight: 800;
  line-height: 1.07; letter-spacing: -0.022em; margin-bottom: 14px;
}
.ak-utama h2 {
  font-family: var(--display, var(--sans)); font-size: 26px; font-weight: 800; letter-spacing: -0.016em;
  margin: 48px 0 14px; color: var(--modul, var(--accent-dark));
}
.ak-utama > p { font-size: 16px; color: var(--ink); line-height: 1.6; margin-bottom: 18px; }
.ak-utama > p a { color: var(--accent); }
.ak-intro {
  font-size: 21px !important; line-height: 1.4 !important;
  color: var(--ink) !important; margin-bottom: 28px !important;
}

/* Angka ringkas */
.ak-angka { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 8px; }
.ak-angka > div {
  flex: 1 1 120px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 15px 16px;
}
.ak-angka b {
  display: block; font-family: var(--sans); font-size: 32px; font-weight: 700;
  color: var(--accent-dark); line-height: 1; letter-spacing: -0.02em; margin-bottom: 5px;
}
.ak-angka span { font-size: 12px; color: var(--ink-muted); }


.ak-catatan {
  margin-top: 52px; padding: 20px 22px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 12px;
}
.ak-catatan p { font-size: 14px; color: var(--ink-soft); line-height: 1.75; margin: 0; }

@media (max-width: 900px) {
  .ak-wadah { grid-template-columns: 1fr; gap: 28px; padding-bottom: 50px; }
  .ak-sisi { margin-top: -80px; display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 22px; align-items: end; }
  /* align-self perlu ditegaskan, karena butir grid meregang secara bawaan dan
     peregangan itu mengalahkan aspect-ratio sehingga potretnya jadi lonjong */
  .ak-potret { max-width: 168px; margin-bottom: 0; grid-row: span 5; align-self: start; }
  .ak-sisi-kutip { grid-column: 1 / -1; }
  .ak-utama { padding-top: 8px; }
  .ak-utama h2 { margin-top: 40px; }
}
@media (max-width: 620px) {
  .ak-sisi { grid-template-columns: 1fr; margin-top: -56px; }
  .ak-potret { grid-row: auto; max-width: 140px; }
    }

body.ak .glos-wrap { max-width: 964px; margin-inline: auto; }

/* ------------------------------------------------------------
   Isi profil di beranda: bidang keahlian, daftar mata kuliah,
   dan daftar publikasi. Daftar publikasi sengaja ditulis lengkap
   dengan nama jurnal dan kuartilnya, karena itulah yang dicari
   orang saat menilai rekam jejak seorang akademisi.
   ------------------------------------------------------------ */

/* Daftar mata kuliah dibuat sebentuk dengan garis waktu paper dan buku:
   sampul di depan, judul, keterangan, lalu panah penanda arah. Baris polos
   berpembatas tipis tidak memberi tahu apa pun tentang isinya, sedangkan
   sampul langsung mengenalkan mata kuliahnya sebelum judulnya dibaca. */
.ak-mkl { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.ak-mkl li { margin: 0; }
.ak-mkl a {
  display: flex; align-items: center; gap: 16px; padding: 10px 14px 10px 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; color: var(--ink);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.ak-mkl a:hover {
  transform: translateX(4px); border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(28, 52, 80, 0.12);
}
.ak-mkl img {
  flex-shrink: 0; width: 84px; height: 48px; object-fit: cover;
  border-radius: 8px; background: var(--pastel-gray);
}
.mkl-teks { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mkl-teks b { font-size: 16px; font-weight: 600; line-height: 1.3; }
.mkl-meta { font-size: 12px; color: var(--ink-muted); }
.mkl-panah {
  flex-shrink: 0; margin-left: auto; width: 18px; height: 18px; fill: none;
  stroke: var(--ink-muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.16s ease, transform 0.16s ease;
}
.ak-mkl a:hover .mkl-panah { stroke: var(--accent-dark); transform: translateX(3px); }

/* Daftar publikasi disusun sebagai garis waktu tegak. Tahunnya menjadi simpul
   di atas garis, sehingga urutan terbitnya terbaca sekali lihat tanpa perlu
   membaca angkanya satu per satu. */
.ak-pub { position: relative; list-style: none; padding: 0; margin: 26px 0 0; }
.ak-pub::before {
  content: ""; position: absolute; top: 15px; bottom: 22px; left: 29px; width: 2px;
  background: linear-gradient(180deg, var(--pastel-blue) 0%, var(--line) 45%, var(--line) 100%);
}
.ak-pub li { position: relative; padding: 0 0 26px 82px; }
.ak-pub li:last-child { padding-bottom: 4px; }
.ak-pub-thn {
  position: absolute; left: 0; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 30px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--accent-dark); background: var(--pastel-blue);
  border: 3px solid var(--surface);
}
.ak-pub-jdl {
  display: block; font-size: 16px; font-weight: 600; line-height: 1.45;
  color: var(--ink); text-decoration: none;
}
.ak-pub-jdl:hover { color: var(--accent-dark); text-decoration: underline; }
.ak-pub-jur { display: block; margin-top: 5px; font-size: 14px; font-style: italic; color: var(--ink-soft); }
.ak-q {
  display: inline-block; margin-left: 8px; font-style: normal; font-size: 12px;
  font-weight: 700; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 8px;
}
.ak-q1 { color: #1d5b34; background: var(--pastel-mint); }
.ak-q2 { color: var(--accent-dark); background: var(--pastel-blue); }
.ak-q3 { color: #7a5c1f; background: var(--pastel-butter); }
.ak-qs { color: #7b3f3f; background: var(--pastel-rose); }

@media (max-width: 620px) {
  .ak-pub li { grid-template-columns: 1fr; gap: 4px; }
  .ak-mkl a { gap: 12px; padding: 9px 12px 9px 9px; }
  .ak-mkl img { width: 66px; height: 38px; }
}

/* Deretan buku: sampul dan judulnya menyatu sebagai satu butir. Sebelumnya
   sampul dipajang sendiri lalu judulnya didaftar lagi di bawahnya, padahal
   keduanya menuju halaman yang sama. */
.ak-buku-rak {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 22px 16px; margin-top: 20px;
}
.ak-buku-rak a { display: block; text-decoration: none; color: var(--ink); }
.ak-buku-rak img {
  width: 100%; height: auto; display: block; border-radius: 8px;
  box-shadow: 0 7px 20px rgba(28, 52, 80, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ak-buku-rak a:hover img { transform: translateY(-6px); box-shadow: 0 15px 32px rgba(28, 52, 80, 0.22); }
.ak-buku-rak span { display: block; margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
.ak-buku-rak a:hover span { color: var(--accent-dark); }

/* Tema riset, ditulis sebagai daftar bernama, bukan kartu, karena isinya
   memang uraian dan bukan pintu ke halaman lain. */
.ak-tema { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 18px; }
.ak-tema li { padding-left: 16px; border-left: 3px solid var(--pastel-blue); }
.ak-tema b { display: block; font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.ak-tema span { display: block; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

/* Tiap butir garis waktu, paper maupun buku, membawa sampul kecil di depan
   judulnya. Sampul jauh lebih cepat dikenali sekilas daripada nama jurnal
   atau judul yang panjang. */
.ak-pub li { display: flex; align-items: flex-start; gap: 14px; }
.ak-pub img {
  flex-shrink: 0; width: 54px; height: auto; border-radius: 8px;
  box-shadow: 0 4px 14px rgba(28, 52, 80, 0.18);
}
/* Buku yang tahun terbitnya belum tercatat, ditandai apa adanya, bukan ditebak. */

/* ------------------------------------------------------------------
   Penyesuaian isi halaman lama ke dalam kolom kanan kerangka bersama.

   Halaman yang ditulis sebelum kerangka ini ada masih memakai pembungkus
   .container, .hero, dan .section dari tata letak sebelumnya. Di dalam
   kolom kanan pembungkus itu tidak diperlukan lagi. Dinetralkan lewat
   gaya, bukan dengan membongkar HTML tiap halaman, supaya tidak ada
   kalimat yang berisiko hilang.
   ------------------------------------------------------------------ */
.ak-utama .container { max-width: none; margin: 0; padding: 0; }
.ak-utama .hero, .ak-utama .hero-tipis, .ak-utama .mk-hero {
  padding: 0; border: 0; background: none; min-height: 0;
}
.ak-utama .hero::before, .ak-utama .hero::after { display: none; }
.ak-utama .section {
  padding: 0; background: none; border: 0;
}
.ak-utama .section + .section { margin-top: 4px; }
.ak-utama .glos-wrap { max-width: none; }
.ak-utama .prose,
.ak-utama .section-note,
.ak-utama .glos-intro,
.ak-utama .tj-intro,
.ak-utama .jalur-intro,
.ak-utama .glos-tutup p,
.ak-utama .hero h1,
.ak-utama .hero-tipis .lead,
.ak-utama .paper-head h1 { max-width: none; }
.ak-utama .hero-highlight { max-width: none; }

/* Judul dan paragraf pembuka disamakan dengan halaman modul */
.ak-utama .hero h1, .ak-utama .paper-head h1 {
  font-family: var(--sans); font-size: clamp(30px, 4.4vw, 42px); font-weight: 700;
  letter-spacing: -0.024em; line-height: 1.2; margin-bottom: 14px;
}
.ak-utama .hero p.lead, .ak-utama p.lead {
  font-size: 18px; line-height: 1.55; color: var(--ink); max-width: none;
  margin-bottom: 18px;
}
.ak-utama .hero { margin-bottom: 28px; }
.ak-utama .section-head h2 {
  font-family: var(--sans); font-size: 26px; font-weight: 700; letter-spacing: -0.016em;
  margin: 0; padding-bottom: 0; border-bottom: 0;
}
.ak-utama .section-head { margin-top: 52px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }

/* Potret bulat di hero lama dihapus, karena potret sudah ada di kolom kiri
   dan menampilkannya dua kali di satu layar hanya membuat halaman ramai. */
.ak-utama .hero-flex { display: block; }
.ak-utama .hero-profile { display: none; }

.ak-utama .paper-head { padding: 0 0 22px; }
/* Pita berlatar gambar dari tata letak lama dinetralkan di dalam kolom kanan.
   Latar bergambar itu dirancang untuk pita selebar layar. Begitu dipaksa masuk
   ke kolom 678 piksel, gambarnya jadi terpotong dan tulisannya justru sulit
   dibaca. Di sini isinya cukup ditampilkan sebagai daftar sederhana, karena
   uraian lengkapnya memang sudah ada di halaman masing-masing. */
.ak-utama .band, .ak-utama .band-buku {
  background: none; background-image: none; padding: 0; margin: 0;
  border: 0; isolation: auto;
}
.ak-utama .band-buku::before, .ak-utama .band::before,
.ak-utama .band-buku::after, .ak-utama .band::after { display: none; }
.ak-utama .band .section { padding: 0; }
.ak-utama .band-buku .book { background: none; }

/* Wadah satu kolom untuk halaman selain halaman utama. Spanduk dan kolom
   identitas sengaja tidak dipasang di sini, supaya begitu sebuah menu dibuka
   perhatian langsung tertuju ke isi menu itu, bukan ke profil yang sudah
   dilihat di halaman utama. */
.ak-halaman { max-width: 732px; margin: 0 auto; padding: 0 26px 80px; }
.ak-halaman .ak-utama { padding-top: 46px; }

/* Blok kontak di halaman Profil. Alamat surel dikumpulkan di satu tempat yang
   jelas, menggantikan tombol apung yang dulu menempel di 46 halaman. */
.kontak-blok {
  margin: 30px 0 8px; padding: 22px 24px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 12px;
}
.kontak-blok h3 { font-family: var(--sans); font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.kontak-blok p { font-size: 16px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 16px; }
.kontak-daftar { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.kontak-daftar li {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px;
  font-size: 16px; align-items: baseline;
}
.kontak-daftar span { font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-muted); }
.kontak-daftar a { color: var(--accent); }
@media (max-width: 560px) {
  .kontak-daftar li { grid-template-columns: 1fr; gap: 2px; }
}

/* ------------------------------------------------------------------
   Pencarian di bilah menu.

   Situs ini punya 36 halaman dan 51 berkas materi tanpa satu pun cara
   mencarinya. Kotak ini menutup lubang itu, berjalan sepenuhnya di
   sisi pengunjung, dan indeksnya baru diunduh saat kotaknya disentuh.
   ------------------------------------------------------------------ */
.cari { position: relative; margin-left: 6px; }
.cari-input {
  width: 150px; padding: 8px 14px 8px 34px; font-family: inherit; font-size: 14px;
  color: var(--ink); background: var(--surface) no-repeat 12px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366717f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  background-size: 15px; border: 0; border-radius: 999px;
  box-shadow: 0 1px 2px rgba(28, 52, 80, 0.10), 0 3px 10px rgba(28, 52, 80, 0.09);
  transition: width 0.18s ease, box-shadow 0.18s ease;
}
.cari-input::placeholder { color: var(--ink-muted); }
.cari-input:hover { box-shadow: 0 1px 2px rgba(28, 52, 80, 0.12), 0 5px 16px rgba(28, 52, 80, 0.14); }
/* Lebarnya sengaja tetap saat disorot. Kotak yang memuai akan mendorong menu
   di sebelahnya dan membuat bilah berkedut tiap kali orang mengetik. */
.cari-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent), 0 5px 18px rgba(28, 52, 80, 0.16);
}

.cari-hasil {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 70;
  width: min(430px, 88vw); max-height: 62vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 38px rgba(28, 52, 80, 0.16); padding: 6px;
}
.cari-butir {
  display: block; padding: 10px 12px; border-radius: 8px;
  text-decoration: none; color: var(--ink);
}
.cari-butir:hover, .cari-butir.kini { background: var(--pastel-blue); }
.cari-kel {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--accent-dark); margin-bottom: 3px;
}
.cari-judul { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.cari-ringkas {
  display: block; margin-top: 3px; font-size: 12px; line-height: 1.5;
  color: var(--ink-soft); overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cari-hasil mark { background: var(--pastel-butter); color: inherit; padding: 0 1px; border-radius: 8px; }
.cari-kosong { padding: 14px 12px; font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0; }

@media (max-width: 920px) {
  .cari { margin-left: 0; flex-basis: 100%; order: 1; }
  .cari-input, .cari-input:focus { width: 100%; }
  .cari-hasil { left: 0; right: auto; width: 100%; }
  .ak-bar .nav { order: 2; }
}
@media print { .cari { display: none; } }

/* ------------------------------------------------------------------
   Halaman materi per pertemuan. Kartunya memuat sampul, fakta singkat
   berkas, dan tombol unduh, supaya keputusan mengunduh bisa diambil
   sebelum berkasnya disentuh.
   ------------------------------------------------------------------ */
.mt-kartu {
  display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap;
  margin: 26px 0 24px; padding: 22px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 12px;
}
.mt-sampul {
  flex-shrink: 0; width: min(320px, 100%); height: auto; border-radius: 8px;
  box-shadow: 0 8px 22px rgba(28, 52, 80, 0.16);
}
.mt-isi { flex: 1 1 260px; display: flex; flex-direction: column; gap: 18px; }
.mt-meta { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mt-meta li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; font-size: 16px; }
.mt-meta span {
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-muted); padding-top: 2px;
}
.mt-isi .btn { align-self: flex-start; }

.mt-navigasi { display: flex; justify-content: space-between; gap: 12px; margin-top: 34px; }
.mt-arah {
  font-size: 14px; font-weight: 600; color: var(--accent-dark); text-decoration: none;
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
}
.mt-arah:hover { border-color: var(--accent); background: var(--pastel-blue); }
.mt-kanan { margin-left: auto; }
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { text-decoration: underline; }

/* Tiga pintu masuk berbasis niat di beranda. Dinamai menurut keperluan
   pengunjung, bukan struktur situs, karena orang datang membawa keperluan. */
.ak-pintu-rak { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 26px 0 6px; }
.ak-pintu {
  display: flex; flex-direction: column; gap: 7px; padding: 18px 20px;
  background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 12px; text-decoration: none; color: var(--ink);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.ak-pintu:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 28px rgba(28, 52, 80, 0.13); }
.ak-pintu b { font-size: 16px; font-weight: 700; }
.ak-pintu span { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }

/* Blok Baru di situs ini, dibaca dari kabar.json yang juga mengisi feed.xml */
.kabar { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 16px; }
.kabar li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
.kb-tgl {
  font-size: 12px; font-weight: 700; color: var(--accent-dark);
  background: var(--pastel-blue); border-radius: 8px; padding: 5px 0;
  text-align: center; height: fit-content;
}
.kabar a { font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; }
.kabar a:hover { color: var(--accent-dark); text-decoration: underline; }
.kb-ket { display: block; margin-top: 3px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }

/* Tanggal pembaruan menyatu di baris hak cipta, diisi dari riwayat git */
.kaki-tgl { color: #5a6675; }

/* Daftar karya di halaman topik */
.tp-daftar { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.tp-daftar li { padding-left: 16px; border-left: 3px solid var(--pastel-blue); }
.tp-daftar a { font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; }
.tp-daftar a:hover { color: var(--accent-dark); text-decoration: underline; }
.tp-ket { display: block; margin-top: 2px; font-size: 14px; font-style: italic; color: var(--ink-soft); }
.ak-tema a { color: inherit; text-decoration: none; }
.ak-tema a:hover { color: var(--accent-dark); text-decoration: underline; }

/* Keterangan tambahan pada butir garis waktu materi: bahan kajian menurut RPS
   dan topik yang benar-benar dibahas di dalam salindianya. Keduanya ditarik
   dari sumber, bukan ditulis ulang, sehingga tidak bisa menyimpang dari isi. */
.tl-kajian {
  display: block; margin-top: 6px; font-size: 12px; color: var(--ink-muted);
}
.tl-topik {
  display: block; margin-top: 5px; font-size: 14px; line-height: 1.55;
  color: var(--ink-soft);
}
.tl-teks .pk-unduh { margin-top: 12px; }

/* Daftar topik di halaman materi */

/* ------------------------------------------------------------------
   Warna identitas per modul.

   Sebelumnya kelima modul memakai navy yang sama, sehingga tidak ada
   petunjuk visual sedang berada di bagian apa. Tiap modul kini punya
   satu rona sendiri, dipakai tipis pada kicker, garis bawah judul
   bagian, dan penanda menu aktif. Semuanya dipilih gelap dan teredam
   supaya tetap satu keluarga dengan navy induknya, dan nisbah
   kontrasnya terhadap latar putih tetap di atas ambang keterbacaan.
   ------------------------------------------------------------------ */
:root { --modul: var(--accent-dark); --modul-tipis: var(--pastel-blue); }
body[data-grup="mengajar"]        { --modul: #1d6270; --modul-tipis: #d5eef2; }
body[data-grup="bedah-publikasi"] { --modul: #2c5580; --modul-tipis: #d7ebff; }
body[data-grup="penelitian"]      { --modul: #574083; --modul-tipis: #e7e0f5; }
body[data-grup="kolaborasi"]      { --modul: #2b6446; --modul-tipis: #dcf0e4; }
body[data-grup="profil"]          { --modul: #7a4a2a; --modul-tipis: #f6e6da; }

.kicker, .hero .kicker, .ak-utama .kicker { color: var(--modul); }
.ak-utama h2 { border-bottom-color: color-mix(in srgb, var(--modul) 28%, var(--line)); }
.ak-utama .section-head { border-bottom-color: color-mix(in srgb, var(--modul) 28%, var(--line)); }
.ak-bar .nav > a.active, .ak-bar .nav-group.active > .nav-btn {
  color: var(--modul); background: var(--modul-tipis);
}
.ak-pintu { border-left-color: var(--modul); }
.tp-daftar li, .ak-tema li { border-left-color: var(--modul-tipis); }
.tl-ada .tl-no { background: var(--modul-tipis); color: var(--modul); }

/* Batang kemajuan baca. Halaman terpanjang di situs ini sepuluh ribu piksel,
   dan tanpa penanda posisi pembaca kehilangan jejak sudah sampai mana. */
.baca-maju {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--modul); z-index: 60; transition: width 0.08s linear;
}
@media print { .baca-maju { display: none; } }

/* Berkas pendukung mata kuliah: rencana pembelajaran dan rubrik penilaian */

/* Rujukan buku mata kuliah yang materinya belum dibuka. Disebut lengkap
   dengan ISBN supaya bisa ditelusuri sendiri, dan tidak diunggah karena
   buku itu milik penerbitnya. */
/* Daftar pustaka: list bersih tanpa kotak, cukup subjudul + entri menjorok */
.ref-rak { display: grid; gap: 20px; margin: 18px 0 8px; }
.ref-mk b {
  display: block; font-family: var(--display, var(--sans)); font-size: 14.5px; font-weight: 800;
  color: var(--ink); margin-bottom: 7px;
}
.ref-mk ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.ref-mk li { font-size: 14px; line-height: 1.6; color: var(--ink-soft); padding-left: 18px; text-indent: -18px; }



/* Sasaran sentuh di layar sentuh. Tautan setinggi belasan piksel sulit
   dikenai jempol, jadi diberi ruang tekan tanpa mengubah tampilannya. */
@media (max-width: 620px) {
  .ak-utama a:not(.btn):not(.mk-ubin):not(.tl-sampul):not(.ak-pintu) {
    padding-block: 3px;
  }
  .tp-daftar a, .ak-mkl a,   .ak-utama a:not([class]), .prose a, .card a:not(.card) {
    padding-block: 4px;
  }
}

/* Halaman galat kini berada di dalam kolom kerangka, jadi jarak bawaannya
   yang dirancang untuk halaman lebar penuh tidak diperlukan lagi. */
.ak-utama .nf { padding: 18px 0 0; }

/* Batas lebar baca dalam satuan em, bukan piksel, supaya ikut menyesuaikan
   ukuran hurufnya sendiri. Teks 16px berhenti di 672 piksel dan teks 14px di
   588 piksel, sehingga keduanya sama-sama jatuh di sekitar 84 huruf per baris.
   Kekhususannya sengaja dinaikkan lewat body.ak agar menang atas aturan
   pelepas batas yang dipasang saat meratakan tepi kanan. */
/* Batas lebar baca dilepas atas permintaan pemilik: paragraf mengisi
   penuh kolomnya. Bersama perataan kiri-kanan, tepi kanan teks kini lurus
   sejajar garis judul dan tidak ada lagi ruang kosong di sisi kanan. */
body.ak .ak-utama p { max-width: none; }
body.ak .ak-utama .statbar p,
body.ak .ak-utama .mt-kartu p,
body.ak .ak-utama .kontak-blok p,
body.ak .ak-utama .card p,
body.ak .ak-utama .mk-ubin p { max-width: none; }

/* Teks sekunder dinaikkan dari 14 ke 15 piksel. Ukuran itu memberi dua hal
   sekaligus: lebih mudah dibaca, dan barisnya berhenti lebih dekat ke garis
   judul di atasnya sehingga tepi kanannya tidak lagi terlihat timpang. */
.ak-utama .section-note,
.ak-utama .glos-intro,
.ak-utama .tj-intro,
.ak-utama .jalur-intro,
.ak-utama .glos-tutup p { font-size: 16px; }

/* Tautan yang menutup sebuah paragraf, seperti "Baca bedahnya", tingginya
   hanya setinggi barisnya. Di layar sentuh itu terlalu tipis untuk jempol,
   jadi diberi ruang tekan tanpa mengubah alur kalimatnya. */
@media (max-width: 620px) {
  .ak-utama p > a:not([class]) { display: inline-block; padding-block: 5px; }
}

/* ------------------------------------------------------------------
   Kuis periksa diri. Umpan baliknya langsung di bawah soal, bukan
   ditunda sampai akhir, supaya pembahasannya terbaca selagi soalnya
   masih segar di kepala.
   ------------------------------------------------------------------ */
.kz-soal {
  margin: 0 0 18px; padding: 20px 22px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 12px;
}
.kz-tanya { font-size: 16px; font-weight: 600; line-height: 1.5; margin-bottom: 14px; }
.kz-pilihan { display: grid; gap: 8px; }
.kz-opsi {
  display: flex; align-items: baseline; gap: 10px; text-align: left;
  font-family: inherit; font-size: 16px; line-height: 1.5; color: var(--ink);
  padding: 10px 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer;
  transition: border-color 0.13s ease, background 0.13s ease;
}
.kz-opsi:hover:not(:disabled) { border-color: var(--modul); background: var(--modul-tipis); }
.kz-opsi:disabled { cursor: default; opacity: 0.75; }
.kz-opsi b { flex-shrink: 0; color: var(--modul); }
.kz-opsi.kz-benar {
  opacity: 1; border-color: #2f7d4f; background: var(--pastel-mint); font-weight: 600;
}
.kz-opsi.kz-salah { opacity: 1; border-color: #b3563e; background: var(--pastel-rose); }
.kz-bahas {
  margin: 12px 0 0; padding: 12px 14px; font-size: 14px; line-height: 1.65;
  color: #6e4535; background: var(--pastel-rose); border-radius: 8px;
}
.kz-bahas-benar { color: #1d5b34; background: var(--pastel-mint); }
.kz-hasil {
  margin-top: 24px; padding: 18px 22px; font-size: 16px; line-height: 1.6;
  background: var(--modul-tipis); color: var(--ink); border-radius: 12px;
}

/* Halaman laporan penelitian */
.lp-tim { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.lp-tim li {
  font-size: 16px; padding-left: 15px; position: relative; color: var(--ink-soft);
}
.lp-tim li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--modul);
}

/* ------------------------------------------------------------------
   Workshop. Ubinnya memakai sampul lanskap karena materi pelatihan
   dikenali dari salindia pembukanya, sama seperti mata kuliah.
   ------------------------------------------------------------------ */
.ws-rak { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 22px 0 34px; }
.ws-ubin {
  display: flex; flex-direction: column; background: var(--bg);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  text-decoration: none; color: var(--ink);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.ws-ubin:hover { transform: translateY(-4px); border-color: var(--modul); box-shadow: 0 16px 34px rgba(28, 52, 80, 0.13); }
.ws-ubin-gbr { line-height: 0; background: var(--pastel-gray); }
.ws-ubin-gbr img { width: 100%; height: auto; display: block; }
.ws-ubin-isi { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.ws-tgl { font-size: 12px; font-weight: 700; color: var(--modul); }
.ws-ubin-isi b { font-size: 16px; font-weight: 700; line-height: 1.35; }
.ws-ket { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.ws-meta { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }

.ws-kartu {
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  margin: 26px 0 8px; padding: 20px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 12px;
}
.ws-sampul { flex: 1 1 300px; max-width: 380px; height: auto; border-radius: 8px;
  box-shadow: 0 8px 22px rgba(28, 52, 80, 0.16); }
.ws-isi { flex: 1 1 220px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ws-isi p { font-size: 16px; line-height: 1.6; margin: 0; }

/* ------------------------------------------------------------------
   Halaman Riset yang dikerjakan. Kartunya memakai lencana tahun besar
   di kiri sebagai jangkar, karena riset dibaca menurut urutan waktu.
   ------------------------------------------------------------------ */
.rs-rak { display: grid; gap: 14px; margin: 30px 0 8px; }
.rs-kartu {
  display: flex; gap: 20px; align-items: flex-start; padding: 20px 22px;
  background: var(--bg); border: 1px solid var(--line);
  border-left: 4px solid var(--modul); border-radius: 12px;
  text-decoration: none; color: var(--ink);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.rs-kartu:hover {
  transform: translateY(-3px); border-color: var(--modul);
  box-shadow: 0 14px 32px rgba(28, 52, 80, 0.13);
}
.rs-thn {
  flex-shrink: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--modul); padding-top: 2px; min-width: 52px;
}
.rs-isi { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rs-label { font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.rs-terbit {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: #1d5b34; background: var(--pastel-mint);
}
.rs-isi b { font-size: 16px; font-weight: 700; line-height: 1.4; }
.rs-ket { font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.rs-lanjut { font-size: 14px; font-weight: 600; color: var(--modul); margin-top: 3px; }

/* Ajakan riset bersama. Diberi ruang dan warna sendiri karena inilah satu
   satunya tindakan yang diminta dari pembaca di halaman ini. */
.rs-ajak {
  margin: 40px 0 0; padding: 28px 30px; border-radius: 12px;
  background: var(--modul-tipis); border: 1px solid transparent;
}
.rs-ajak b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 10px; }
.rs-ajak p { font-size: 16px; line-height: 1.7; margin-bottom: 12px; }
.rs-ajak-cara { color: var(--ink-soft); }
.rs-ajak .btn { margin-top: 4px; }
.rs-ajak-lain { display: block; margin-top: 14px; font-size: 14px; color: var(--ink-soft); }
.rs-ajak-lain a { color: var(--modul); }

@media (max-width: 560px) {
  .rs-kartu { flex-direction: column; gap: 10px; }
  .rs-thn { font-size: 18px; }
  .rs-ajak { padding: 22px 20px; }
}

/* Tautan kolom identitas diberi ruang tekan di layar sentuh. Tingginya semula
   26 piksel, tepat di bawah ambang nyaman untuk jempol. */
@media (max-width: 620px) {
  .ak-tautan li { gap: 12px; }
  .ak-tautan a { display: inline-block; padding-block: 3px; }
}

/* ============================================================
   Perataan kiri-kanan
   ============================================================
   Halaman paper dilebarkan lebih dulu. Kolom bacanya tadinya hanya 368 piksel,
   sekitar 46 huruf per baris, karena daftar isi selebar 220 piksel memakan
   sepertiga kolom yang memang sudah sempit. Halaman itu punya bilah samping
   persis seperti beranda, jadi wajar ia memakai lebar bingkai yang sama, dan
   badan papernya naik ke sekitar 600 piksel atau kira-kira 75 huruf per baris.
   Tanpa pelebaran ini perataan kiri-kanan justru merusak, karena semakin
   sempit kolomnya semakin lebar lubang yang harus dibuat di antara kata. */
.ak-halaman:has(.paper-body) { max-width: 964px; }

/* Perataan dipasang pada teks mengalir di kolom baca utama.
   text-align-last menahan baris terakhir tetap rata kiri. Ini bukan hiasan:
   tanpanya baris penutup yang cuma berisi dua kata ikut direntangkan selebar
   kolom. Efek sampingnya menguntungkan, karena paragraf satu baris seluruhnya
   adalah baris terakhir, sehingga judul pendek dan keterangan singkat otomatis
   tidak ikut teregang.
   Pemenggalan suku kata dinyalakan supaya kata panjang boleh dipotong daripada
   memaksa spasi melebar. Halaman sudah menyatakan lang="id" sehingga peramban
   yang punya kamus Indonesia akan memakainya, dan yang tidak punya sekadar
   mengabaikannya tanpa merusak apa pun. */
body.ak .ak-utama p,
body.ak .ak-utama li {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* text-align-last ikut diwariskan ke elemen di dalamnya, dan itu sempat
   merusak chip tanggal di blok Baru. Isinya cuma satu baris, sehingga baris
   itu sekaligus baris terakhir, lalu warisan rata kiri menang atas rata tengah
   yang sudah dipasang pada chipnya sendiri. Warisan itu dihentikan di anak
   pertama. Nilai auto membuat baris terakhir kembali mengikuti perataan
   elemennya masing-masing, jadi aturan ini menjaga semua elemen rata tengah
   atau rata kanan yang ada sekarang maupun yang ditambahkan nanti. */
body.ak .ak-utama p > *,
body.ak .ak-utama li > * { text-align-last: auto; }

/* Dikecualikan: kolom yang terlalu sempit untuk diratakan. Di bawah kira-kira
   460 piksel, perataan berhenti merapikan dan mulai membuat sungai putih yang
   menarik mata turun ke bawah alih-alih menyusuri baris. */
body.ak .ak-utama .glos-item p,
body.ak .ak-utama .glos-tool p,
body.ak .ak-utama .toc p,
body.ak .ak-utama .toc li,
body.ak .ak-utama .book-body p,
body.ak .ak-utama .head-grid p,
body.ak .ak-utama details.reviewer .content p,
body.ak .ak-utama .mk-ubin p,
body.ak .ak-utama .ak-pintu p,
body.ak .ak-utama .statbar p,
body.ak .ak-utama table p,
body.ak .ak-utama table li,
body.ak .ak-utama figcaption,
body.ak .ak-utama .tanda-item p,
body.ak .ak-utama .bm-kartu p,
body.ak .ak-utama .langkah-item p,
body.ak .ak-utama .value p,
body.ak .ak-utama .flow-step p,
body.ak .ak-utama .card-flex p,
body.ak .ak-utama .ws-isi p {
  text-align: left;
  hyphens: manual;
}

/* Di layar sempit seluruh perataan dilepas. Ponsel hanya memuat sekitar empat
   puluh huruf per baris, dan pada lebar itu perataan selalu kalah rapi
   dibanding rata kiri biasa. */
@media (max-width: 700px) {
  body.ak .ak-utama p,
  body.ak .ak-utama li { text-align: left; hyphens: manual; }
}

/* Kalimat tujuan situs berdiri sebagai paragrafnya sendiri, bukan menyambung
   di ekor paragraf pembuka. Digabung, keduanya menjadi enam baris pada ukuran
   20 piksel dan terbaca sebagai tembok, sehingga kalimat yang justru paling
   ingin diingat orang tenggelam di bagian bawah blok. */
/* Kekhususan sengaja dinaikkan lewat body.ak agar menang atas .ak-utama > p
   yang sudah menetapkan ukuran 16 piksel untuk paragraf biasa. */
body.ak .ak-utama .ak-misi {
  font-size: 18px; line-height: 1.65; color: var(--ink);
  border-left: 3px solid var(--modul, var(--accent));
  padding-left: 16px; margin: 0 0 26px;
}


/* Dua sumber sitasi ditampilkan berdampingan, masing-masing dalam kotaknya
   sendiri. Kotaknya perlu, bukan hiasan: tanpa pembatas yang jelas, pembaca
   melihat dua indeks-h berbeda berderet dan menyangka salah satunya keliru.
   Keterangan cakupan diletakkan sebelum angkanya, supaya alasan perbedaannya
   terbaca lebih dulu daripada perbedaannya sendiri. */
.ak-sumber {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px 16px; margin: 22px 0 0;
}
.ak-sumber h3 {
  font-family: var(--sans); font-size: 16px; font-weight: 700;
  letter-spacing: 0.01em; color: var(--modul, var(--accent-dark)); margin: 0 0 6px;
}
body.ak .ak-utama .ak-sumber-ket {
  font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0;
}
.ak-sumber .ak-angka { margin: 14px 0 0; }
body.ak .ak-utama .ak-sumber-tautan { font-size: 14px; margin: 14px 0 0; }


/* ============================================================
   Sistem visual: tombol bertingkat dan ikatan warna modul
   ============================================================
   Aksi utama tampil pekat memakai warna modul halamannya, aksi kedua
   bergaris tepi, sisanya tautan teks. Tanpa tingkatan ini semua tautan
   berebut perhatian dengan bobot yang sama. */
.btn { border: 1px solid var(--line); color: var(--ink); }
.btn:hover { border-color: var(--modul, var(--accent-dark)); color: var(--modul, var(--accent-dark)); }
.btn.primary { background: var(--modul-isi, var(--aksen-isi)); border-color: var(--modul, var(--accent-dark)); color: #fff; }
.btn.primary:hover { filter: brightness(1.12); background: var(--modul-isi, var(--aksen-isi)); color: #fff; }

/* Tombol unduh adalah aksi utama halaman materi, jadi ia yang paling pekat.
   Keterangan ukuran berkas tetap menempel di dalamnya dengan bobot tipis. */
.pk-unduh {
  color: #fff; background: var(--modul-isi, var(--aksen-isi));
}
.pk-unduh:hover { background: var(--modul-isi, var(--aksen-isi)); filter: brightness(1.12); }
.pk-unduh span { opacity: 0.75; }

/* Blok berwarna ikut warna modul halamannya, bukan warna pastel lepas.
   Warna bermakna tetap dibiarkan: kuning peringatan dan hijau penanda
   berhasil tidak diikat ke modul karena maknanya memang beda. */
.kb-tgl { background: var(--modul-tipis, var(--pastel-blue)); color: var(--modul, var(--accent-dark)); }
.kicker { color: var(--modul, var(--accent-dark)); }
.mk-chip.aktif { background: var(--modul-isi, var(--aksen-isi)); border-color: var(--modul, var(--accent-dark)); }

/* ============================================================
   Kaki halaman: peta situs mini
   ============================================================ */
.kaki-peta {
  display: grid; grid-template-columns: 1fr 1.35fr; gap: 40px; align-items: center;
  padding: 26px 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 18px;
}
.kaki-peta h4 {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 10px;
}
.kaki-peta ul { list-style: none; padding: 0; margin: 0; }
.kaki-peta li { margin: 0 0 7px; }
.kaki-peta a { font-size: 14px; color: var(--ink-soft); text-decoration: none; }
.kaki-peta a:hover { color: var(--modul, var(--accent-dark)); text-decoration: underline; }
@media (max-width: 700px) {
  .kaki-peta { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   Remah jejak terlihat
   ============================================================
   Datanya sudah lama ada untuk mesin pencari; ini wujudnya untuk manusia. */
.remah {
  font-size: 14px; color: var(--ink-muted);
  margin: 0 0 18px; overflow-x: auto; white-space: nowrap;
}
.remah a { color: var(--ink-soft); text-decoration: none; }
.remah a:hover { color: var(--modul, var(--accent-dark)); text-decoration: underline; }
.remah .remah-pisah { margin: 0 7px; color: var(--line); }
.remah .remah-kini { color: var(--ink); font-weight: 600; }

/* ============================================================
   Lanjut membaca: ujung halaman tidak buntu
   ============================================================ */
.lanjut {
  border-top: 1px solid var(--line); margin-top: 44px; padding-top: 22px;
}
.lanjut h2 {
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 14px; border: none; padding: 0;
}
.lanjut ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lanjut a { font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; }
.lanjut a:hover { color: var(--modul, var(--accent-dark)); text-decoration: underline; }
.lanjut .lanjut-ket { display: block; font-size: 14px; font-weight: 400; color: var(--ink-soft); margin-top: 2px; }

/* Kabar lama dilipat supaya beranda tidak memanjang */
.kabar-lipat { margin-top: 14px; }
.kabar-lipat summary {
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-soft);
  padding: 6px 0; list-style: none;
}
.kabar-lipat summary::before { content: "+ "; color: var(--modul, var(--accent-dark)); }
.kabar-lipat[open] summary::before { content: "\2212  "; }
.kabar-lipat summary:hover { color: var(--modul, var(--accent-dark)); }
.kabar-lipat .kabar { margin-top: 10px; }


/* ============================================================
   TRANSFORMASI TAMPILAN: portal akademik
   Lapisan ini sengaja berada paling akhir supaya menang kaskade.
   Mencabutnya utuh mengembalikan tampilan lama.
   ============================================================ */
:root { --tinta-bar: #16222e; --bayang-kartu: 0 1px 2px rgba(20,35,50,0.05), 0 4px 18px rgba(20,35,50,0.07); }

/* ---- 1. bingkai gelap: bilah atas ---- */
.ak-bar { background: var(--tinta-bar); border-bottom: 1px solid #0e161f; }
.ak-nama { color: #f3f6f9; }
.ak-nama:hover { color: #fff; }
.ak-bar .nav > a, .ak-bar .nav-btn { color: #c6d2dd; }
.ak-bar .nav > a:hover, .ak-bar .nav-btn:hover { background: rgba(255,255,255,0.10); color: #fff; }
.ak-bar .nav > a.active, .ak-bar .nav-group.active > .nav-btn {
  color: #fff; background: rgba(255,255,255,0.14);
}
.nav-toggle span { background: #e7edf3; }
@media (max-width: 920px) {
  .ak-bar .nav-btn { color: #8fa1b3; }
  .ak-bar .nav-menu a { color: #d6dfe8; }
  .ak-bar .nav-menu a:hover { background: rgba(255,255,255,0.10); color: #fff; }
  .ak-bar .nav-menu a.active { background: rgba(255,255,255,0.14); color: #fff; }
}

/* ---- 1b. bingkai gelap: kaki halaman ---- */
.site-footer { background: var(--tinta-bar); border-top: 0; color: #9db0c0; margin-top: 56px; padding: 8px 0 26px; }
.site-footer a { color: #d6dfe8; font-weight: 600; }
.site-footer a:hover { color: #fff; }
.kaki-peta { border-bottom: 1px solid rgba(255,255,255,0.12); }
.kaki-peta h4 { color: #7e93a6; }
.kaki-peta a { color: #c6d2dd; }
.kaki-peta a:hover { color: #fff; }
.kaki-tgl { color: #7e93a6; }

/* ---- 2. judul serif ---- */
/* Kekhususan dinaikkan lewat body.ak karena aturan lama menetapkan sans
   dengan selektor berlapis; tanpa ini judulnya tetap Inter. */
body.ak h1, body.ak .ak-utama h1, body.ak .ak-utama .hero h1,
body.ak .ak-utama .paper-head h1, body.ak .ak-utama h2, body.ak .section-head h2 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em;
}
/* Label kecil tetap sans: ia penunjuk arah, bukan judul. */
body.ak .lanjut h2, body.ak .kaki-peta h4, body.ak .toc p.toc-title { font-family: var(--sans); }

/* Tanda tangan modul: garis pendek di bawah judul halaman */
.ak-utama .hero h1::after, .ak-utama > h1::after, .ak-utama .paper-head h1::after {
  content: ""; display: block; width: 46px; height: 4px; border-radius: 999px;
  background: var(--modul-isi, var(--aksen-isi)); margin-top: 16px;
}

/* ---- 3. kedalaman kartu ---- */
.card, .mt-kartu, .book, .bm-kartu, .rs-kartu, .ws-kartu, .ak-sumber, .glos-item {
  border-color: #edf0f3; box-shadow: var(--bayang-kartu); background: var(--kartu);
}
.mk-ubin, .ak-pintu {
  border-color: #edf0f3; box-shadow: var(--bayang-kartu); background: var(--kartu);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.mk-ubin:hover, .ak-pintu:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(20,35,50,0.06), 0 12px 30px rgba(20,35,50,0.12);
}
@media (prefers-reduced-motion: reduce) {
  .mk-ubin, .ak-pintu { transition: none; }
  .mk-ubin:hover, .ak-pintu:hover { transform: none; }
}

/* ---- 4. tanda tangan modul pada detail ---- */
.ak-angka b { font-family: var(--serif); color: var(--modul, var(--accent-dark)); }
body.ak .ak-utama p > a:not(.btn):not(.pk-unduh) {
  color: var(--modul, var(--accent-dark));
  text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--modul, var(--accent-dark)) 40%, transparent);
}
body.ak .ak-utama p > a:not(.btn):not(.pk-unduh):hover { text-decoration-color: var(--modul, var(--accent-dark)); }
:focus-visible { outline: 2px solid var(--modul, var(--accent-dark)); outline-offset: 2px; }
::selection { background: var(--modul-tipis, var(--pastel-blue)); }

/* Potret beranda diberi bingkai halus supaya berdiri dari latarnya */
.ak-potret img { box-shadow: 0 0 0 4px #fff, var(--bayang-kartu); }

/* ============================================================
   SISTEM DUA LEBAR: bingkai lebar, baca sempit
   ============================================================
   Lebar baca paragraf tetap 42em, sekitar 75 huruf per baris, karena baris
   yang lebih panjang membuat mata tersesat saat turun baris; itu aturan
   penerbitan, bukan selera. Yang tadinya keliru adalah bingkainya ikut
   dikunci 964 piksel, sehingga layar lebar terasa kosong kiri-kanan.
   Sekarang bilah, beranda, rak kartu, dan kaki halaman memakai bingkai
   1216 piksel, sedangkan halaman baca naik secukupnya. Grid kartu memakai
   auto-fill, jadi kolom-kolomnya bertambah sendiri mengikuti lebar baru. */
:root { --lebar-bingkai: 1216px; }

.ak-bar-isi { max-width: var(--lebar-bingkai); }
.site-footer .container { max-width: var(--lebar-bingkai); }

/* Beranda: bilah samping diberi ruang lebih, kolom utama melebar.
   Susunan kolomnya dikurung media query, karena aturan ini berada paling
   akhir di berkas dan tanpa kurungan ia menang juga atas aturan ponsel
   yang menumpuk kolom menjadi satu; beranda pernah luber gara-gara itu. */
.ak-wadah { max-width: var(--lebar-bingkai); }
@media (min-width: 921px) {
  .ak-wadah { grid-template-columns: 240px minmax(0, 1fr); gap: 36px; }
}

/* Halaman rak dan koleksi: kartu boleh memakai lebar penuh */
body.ak .glos-wrap { max-width: var(--lebar-bingkai); }
.ak-halaman:has(.mk-rak),
.ak-halaman:has(.glos-item) { max-width: var(--lebar-bingkai); }

/* Halaman baca: naik secukupnya, tidak sampai merusak ukuran baris.
   Halaman paper ikut naik karena membawa daftar isi di sisinya. */
.ak-halaman { max-width: 820px; }
.ak-halaman:has(.paper-body) { max-width: 1000px; }

/* Halaman koleksi bergambar: laporan riset, workshop, dan rak buku
   diberi bingkai menengah supaya kartunya bernapas. */
.ak-halaman:has(.rs-kartu),
.ak-halaman:has(.ws-kartu),
.ak-halaman:has(.book) { max-width: 1000px; }

/* Ikon kaki halaman: garis tipis warna teksnya, menyala penuh saat disentuh */
.kaki-peta li a { display: inline-flex; align-items: center; gap: 9px; }
.kaki-ikon {
  width: 15px; height: 15px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.7;
}
.kaki-peta a:hover .kaki-ikon { opacity: 1; }

/* Kotak angka diberi rona lembut warna modul halamannya. Sengaja satu warna
   untuk semua kotak dalam satu halaman, bukan warna-warni per kotak: empat
   warna berjejer terbaca sebagai infografis mainan, sedangkan satu rona yang
   mengikuti modul membuat kotaknya hidup sekaligus bercerita tentang
   tempatnya. Rona dicampur putih supaya lebih pelan dari warna pastel
   penanda; peramban tua yang tidak paham color-mix cukup memakai latar lama. */
.ak-angka > div {
  background: color-mix(in srgb, var(--modul-tipis, var(--pastel-blue)) 45%, #fff);
  border-color: color-mix(in srgb, var(--modul-tipis, var(--pastel-blue)) 75%, #fff);
}
.ak-angka span { color: color-mix(in srgb, var(--modul, var(--accent-dark)) 72%, #3a4654); }

/* Daftar mata kuliah beranda: dua kolom di layar lebar. Tujuh kartu selebar
   kolom penuh yang bertumpuk adalah pemakan tinggi beranda terbesar. */
@media (min-width: 900px) {
  .ak-mkl { grid-template-columns: 1fr 1fr; gap: 12px 18px; }
}

/* Kotak Di halaman ini: daftar lompat untuk halaman panduan panjang */
/* Isi halaman: baris chip lompat, bukan kotak */
.isi-hal { border: 0; background: none; padding: 0; margin: 20px 0 8px; }
.isi-hal-judul {
  font-family: var(--display, var(--sans)); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 10px;
}
.isi-hal ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.isi-hal li { margin: 0; }
.isi-hal a {
  display: inline-block; font-size: 13.5px; font-weight: 600; text-decoration: none;
  color: var(--modul, var(--accent-dark)); background: var(--modul-tipis, var(--pastel-blue));
  padding: 7px 14px; border-radius: 999px;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.isi-hal a:hover { transform: translateY(-1px); filter: brightness(0.97); text-decoration: none; }

/* Tombol kembali ke atas: muncul setelah pembaca melewati dua layar,
   dibuat dari skrip supaya tidak perlu menyunting markup semua halaman */
.ke-atas {
  position: fixed; right: 22px; bottom: 22px; z-index: 50;
  width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--tinta-bar, #16222e); color: #e7edf3;
  font-size: 19px; line-height: 44px; text-align: center;
  box-shadow: 0 4px 16px rgba(20, 35, 50, 0.25);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.ke-atas.tampil { opacity: 1; visibility: visible; transform: none; }
.ke-atas:hover { background: #223447; }
@media print { .ke-atas { display: none; } }

/* ============================================================
   Area bimbingan: rekap publik, halaman masuk, rincian terbatas
   ============================================================ */

/* Batang kemajuan per kelompok di halaman Bimbingan publik */
.bim-rekap { margin: 10px 0 6px; display: grid; gap: 18px; }
.bim-kelompok b { font-size: 16px; }
.bim-angka-baris { font-size: 14px; color: var(--ink-soft); margin: 2px 0 8px; }
.bim-batang {
  display: flex; height: 14px; border-radius: 999px; overflow: hidden;
  background: #e8ecef;
}
.bim-batang span { display: block; height: 100%; }
.b-lulus  { background: var(--modul-isi, var(--aksen-isi)); }
.b-sempro { background: color-mix(in srgb, var(--modul, var(--accent-dark)) 55%, #fff); }
.b-judul  { background: color-mix(in srgb, var(--modul, var(--accent-dark)) 28%, #fff); }
.bim-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; font-size: 14px; color: var(--ink-soft); }
.bim-legenda i {
  display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  margin-right: 6px; font-style: normal; vertical-align: -1px; background: #e8ecef;
}
.bim-catatan { font-size: 14px; color: var(--ink-muted); margin-top: 14px; }

/* Halaman masuk: satu kartu di tengah panggung */
.halaman-masuk { background: var(--surface); }
.masuk-panggung {
  min-height: calc(100vh - 65px); display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 46px 20px 40px;
}
.masuk-kartu {
  width: 100%; max-width: 420px; background: var(--kartu);
  border: 1px solid #edf0f3; border-radius: 12px;
  box-shadow: var(--bayang-kartu, 0 4px 18px rgba(20,35,50,0.07));
  padding: 30px 30px 24px;
}
.masuk-kartu h1 { font-size: 28px; margin: 2px 0 10px; }
.masuk-kartu h1::after {
  content: ""; display: block; width: 46px; height: 4px; border-radius: 999px;
  background: var(--modul-isi, var(--aksen-isi)); margin-top: 12px;
}
.masuk-keterangan { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 18px; }
.masuk-galat {
  background: #fdecec; border: 1px solid #f3c8c8; color: #8c2f2f;
  border-radius: 8px; padding: 10px 14px; font-size: 14px; margin: 0 0 16px;
}
.masuk-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin: 14px 0 5px; }
.masuk-input {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  padding: 10px 13px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface);
}
.masuk-input:focus { border-color: var(--modul, var(--accent-dark)); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--modul, var(--accent-dark)) 18%, transparent); }
.masuk-sandi { position: relative; }
.masuk-sandi .masuk-input { padding-right: 64px; }
.masuk-intip {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--modul, var(--accent-dark)); background: none; border: 0; padding: 6px 8px;
}
.masuk-tombol {
  width: 100%; margin-top: 20px; cursor: pointer; font: inherit;
  font-size: 15px; font-weight: 700; color: #fff;
  background: var(--modul-isi, var(--aksen-isi)); border: 0; border-radius: 999px;
  padding: 12px 16px; transition: filter 0.15s ease;
}
.masuk-tombol:hover { filter: brightness(1.12); }
.masuk-kaki { font-size: 13px; line-height: 1.6; color: var(--ink-muted); margin: 16px 0 0; }
.masuk-pulang { margin-top: 22px; font-size: 14px; }
.masuk-pulang a { color: var(--ink-soft); text-decoration: none; }
.masuk-pulang a:hover { color: var(--modul, var(--accent-dark)); }

/* Rincian terbatas */
.rekap-siapa { margin-left: auto; font-size: 14px; color: #c6d2dd; }
.rekap-siapa b { color: #fff; }
.rekap-siapa a { color: #d6dfe8; }
.rekap-jumlah { font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--ink-muted); margin-left: 8px; }
.rekap-gulir { overflow-x: auto; }
.rekap-tabel { width: 100%; border-collapse: collapse; font-size: 14px; margin: 4px 0 10px; }
.rekap-tabel th {
  text-align: left; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted); padding: 8px 12px; border-bottom: 2px solid var(--line);
}
.rekap-tabel td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rekap-ket { color: var(--ink-soft); }
.rekap-tahap {
  display: inline-block; font-size: 12.5px; font-weight: 600;
  border-radius: 999px; padding: 3px 11px; white-space: nowrap;
}
.tahap-lulus  { background: var(--modul-isi, var(--aksen-isi)); color: #fff; }
.tahap-sempro { background: color-mix(in srgb, var(--modul, var(--accent-dark)) 30%, #fff); color: var(--modul, var(--accent-dark)); }
.tahap-judul  { background: color-mix(in srgb, var(--modul, var(--accent-dark)) 14%, #fff); color: var(--modul, var(--accent-dark)); }
.tahap-belum  { background: #eceff2; color: var(--ink-soft); }

/* ============================================================
   Papan progres, pendaftaran, dan panel kelola
   ============================================================ */
.prog-kelompok { margin-top: 10px; }
.prog-rak {
  list-style: none; padding: 0; margin: 14px 0 6px;
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.prog-pil {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  background: var(--kartu); border: 1px solid #edf0f3; border-radius: 12px;
  border-left: 4px solid var(--modul, var(--accent-dark));
  padding: 10px 14px; box-shadow: var(--bayang-kartu);
}
.prog-nama { font-size: 14px; font-weight: 600; color: var(--ink); }
.prog-status { font-size: 12px; white-space: nowrap; color: var(--ink-soft); }
.prog-pil.status-lulus  { border-left-color: var(--modul, var(--accent-dark)); }
.prog-pil.status-lulus .prog-status { color: var(--modul, var(--accent-dark)); font-weight: 700; }
.prog-pil.status-sempro { border-left-color: color-mix(in srgb, var(--modul, var(--accent-dark)) 55%, #fff); }
.prog-pil.status-judul  { border-left-color: color-mix(in srgb, var(--modul, var(--accent-dark)) 28%, #fff); }
.prog-pil.status-belum  { border-left-color: #d5dade; }
/* Pendaftar yang belum diverifikasi: abu, sesuai proses bisnisnya */
.prog-pil.status-tunggu { border-left-color: #c9cfd5; background: #f6f7f8; box-shadow: none; }
.prog-pil.status-tunggu .prog-nama { color: var(--ink-muted); font-weight: 500; }
.prog-pil.status-tunggu .prog-status { color: var(--ink-muted); font-style: italic; }

.prog-ajak {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-top: 34px; padding: 22px 24px;
  background: color-mix(in srgb, var(--modul-tipis, var(--pastel-blue)) 40%, #fff);
  border: 1px solid color-mix(in srgb, var(--modul-tipis, var(--pastel-blue)) 80%, #fff);
  border-radius: 12px;
}
.prog-ajak b { font-size: 17px; }
.prog-ajak p { font-size: 14px; color: var(--ink-soft); margin: 4px 0 0; max-width: 480px; }
.prog-ajak-tombol { display: flex; gap: 10px; flex-wrap: wrap; }

/* Kolom jebakan bot: keluar dari layar, bukan display none, karena bot
   pintar melewati yang disembunyikan lewat display */
.jebakan { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.akun-pesan {
  background: #e6f4ea; border: 1px solid #bfe3cb; color: #1d5c33;
  border-radius: 8px; padding: 12px 16px; font-size: 14px; margin: 0 0 20px;
  font-family: var(--mono, ui-monospace, Consolas, monospace); word-break: break-word;
}
.akun-aksi { display: flex; gap: 8px; }
.akun-aksi form { margin: 0; }
.akun-tombol {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--kartu); color: var(--ink-soft);
}
.akun-tombol:hover { border-color: var(--modul); color: var(--modul); }
.akun-tombol.setuju { background: var(--modul-isi, var(--aksen-isi)); border-color: var(--modul, var(--accent-dark)); color: #fff; }
.akun-tombol.setuju:hover { filter: brightness(1.12); color: #fff; }
.akun-tombol.bahaya:hover { border-color: #b3453f; color: #b3453f; }
.akun-form { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.akun-form .masuk-input { width: auto; flex: 1 1 180px; }
.akun-form .akun-tombol-tambah { width: auto; margin: 0; flex: 0 0 auto; padding: 10px 22px; }

/* ============================================================
   Fitur unggulan: pita papan progres, alur tahapan, panel admin
   ============================================================ */
.prog-band {
  background: linear-gradient(130deg, var(--tinta-bar, #16222e) 20%, #1d6270 100%);
  color: #e9f1f5; padding: 52px 0 44px;
}
.prog-band-isi { max-width: var(--lebar-bingkai, 1216px); margin: 0 auto; padding: 0 26px; }
.prog-band-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #9fd4de; margin: 0 0 10px;
}
.prog-band h1, .admin-band h1 {
  font-family: var(--serif); font-weight: 600; color: #fff;
  font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.01em; margin: 0 0 12px;
}
.prog-band-lead, .admin-band-lead { font-size: 16px; line-height: 1.6; color: #c3d4dc; max-width: 620px; margin: 0; }
.prog-band-angka { display: flex; flex-wrap: wrap; gap: 34px 54px; margin-top: 30px; }
.prog-band-angka b {
  display: block; font-family: var(--serif); font-size: 40px; font-weight: 600;
  color: #fff; line-height: 1.1;
}
.prog-band-angka span { font-size: 13px; color: #9fb4c0; }
.admin-menyala b { color: var(--unj-emas); }

/* Alur tahapan: pipa bertingkat judul -> sempro -> lulus */
.prog-alur {
  display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap;
  margin: 30px 0 8px;
}
.prog-alur-tahap {
  flex: 1 1 130px; background: var(--kartu); border: 1px solid #edf0f3; border-radius: 12px;
  box-shadow: var(--bayang-kartu); padding: 14px 18px; border-top: 4px solid var(--line);
}
.prog-alur-tahap b { display: block; font-family: var(--serif); font-size: 30px; color: var(--ink); }
.prog-alur-tahap span { font-size: 13px; color: var(--ink-soft); }
.prog-alur-tahap.t-judul  { border-top-color: color-mix(in srgb, var(--modul) 28%, #fff); }
.prog-alur-tahap.t-sempro { border-top-color: color-mix(in srgb, var(--modul) 55%, #fff); }
.prog-alur-tahap.t-lulus  { border-top-color: var(--modul); }
.prog-alur-tahap.t-lulus b { color: var(--modul); }
.prog-alur-panah { align-self: center; font-size: 26px; color: var(--ink-muted); }
.prog-alur-samping {
  flex: 1 1 100%; display: flex; gap: 22px; font-size: 13px; color: var(--ink-muted);
}
.prog-alur-samping b { color: var(--ink-soft); }

/* Kendali papan: cari plus saring dalam satu baris */
.prog-kendali { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; margin: 24px 0 4px; }
.prog-cari {
  font: inherit; font-size: 14px; color: var(--ink);
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--kartu); width: 240px; box-shadow: var(--bayang-kartu);
}
.prog-cari:focus { outline: none; border-color: var(--modul);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--modul) 18%, transparent); }
.prog-kendali .mk-saring { margin: 0; }

/* Kartu mahasiswa dengan inisial */
.prog-avatar {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--modul) 14%, #fff);
  color: var(--modul, var(--accent-dark));
}
.prog-pil { align-items: center; justify-content: flex-start; }
.prog-teks { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.prog-nama { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-lulus .prog-avatar { background: var(--modul); color: #fff; }
.status-tunggu .prog-avatar { background: #e3e6e9; color: var(--ink-muted); }

/* Pita panel admin: gelap dengan lencana kuning supaya beda dari halaman biasa */
.admin-band {
  background: linear-gradient(130deg, #041e1f 10%, #01474a 100%);
  color: #e9f1f5; padding: 44px 0 38px; border-bottom: 3px solid var(--unj-emas);
}
.admin-band-isi { max-width: 940px; margin: 0 auto; padding: 0 26px; }
.admin-lencana {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--unj-emas); color: #013638; border-radius: 999px;
  padding: 4px 14px; margin: 0 0 14px;
}

/* Sorotan fitur unggulan di beranda */
.sorot-progres {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin: 14px 0 6px; padding: 22px 26px; text-decoration: none;
  background: linear-gradient(130deg, #9a3412 10%, #ea580c 100%);
  border-radius: 12px; color: #fff7ed;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.sorot-progres:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(194, 65, 12, 0.35); }
.sorot-isi { min-width: 0; }
.sorot-lencana {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--kartu); color: #9a3412;
  border-radius: 999px; padding: 3px 11px; margin-bottom: 8px;
}
.sorot-progres b { display: block; font-family: var(--serif); font-size: 22px; color: #fff; margin-bottom: 6px; }
.sorot-ket { font-size: 14px; line-height: 1.6; color: #ffedd5; display: block; max-width: 640px; }
.sorot-panah { font-size: 30px; color: #fff; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  .sorot-progres { transition: none; }
  .sorot-progres:hover { transform: none; }
}

/* ============================================================
   IDENTITAS UNJ: emas, hijau, dan api
   ============================================================
   Diambil dari lambang almamater: emas #ffd21e, hijau tua #04624c,
   api merah #e1251b. Hijau menjadi aksen dasar menggantikan biru,
   emas menjadi bingkai dan sorotan, merah dipakai sangat hemat
   sebagai titik atensi. Warna per modul lain tidak diganggu supaya
   penanda kelompok tetap hidup. */
:root {
  --unj-emas: #ffdd00;
  --unj-emas-lembut: #fdf6c3;
  --unj-hijau: #006569;
  --unj-hijau-tua: #013638;
  --unj-merah: #cf1e2e;
  --accent: #0b7d81;
  --accent-dark: var(--unj-hijau);
}
body[data-grup="mengajar"] { --modul: var(--unj-hijau); --modul-tipis: #d2ecec; }
body[data-grup="beranda"]  { --modul: var(--unj-hijau); --modul-tipis: var(--unj-emas-lembut); }

/* Bingkai emas pada gelapnya bilah dan kaki: tanda tangan almamater */
.ak-bar { border-bottom: 3px solid var(--unj-emas); }
.site-footer { border-top: 3px solid var(--unj-emas); }

/* Pita papan progres ikut hijau almamater, kicker menyala emas */
.prog-band { background: linear-gradient(130deg, #012f31 12%, var(--unj-hijau) 100%); }
.prog-band-kicker { color: var(--unj-emas); }
.prog-band-angka span { color: #b5d8d9; }
.prog-band-lead { color: #cfe7e8; }

/* Sorotan beranda: kartu emas dengan teks hijau tua, persis logonya.
   Lencana dibalik, hijau berhuruf emas. Merah api hanya di panahnya. */
.sorot-progres {
  background: linear-gradient(130deg, #eecd00 8%, var(--unj-emas) 90%);
  color: var(--unj-hijau-tua);
}
.sorot-progres:hover { box-shadow: 0 12px 30px rgba(200, 173, 0, 0.45); }
.sorot-lencana { background: var(--unj-hijau); color: var(--unj-emas); }
.sorot-progres b { color: var(--unj-hijau-tua); }
.sorot-ket { color: #1d5254; }
.sorot-panah { color: var(--unj-merah); }

/* Sentuhan kecil yang menjalar ke seluruh situs */
::selection { background: var(--unj-emas-lembut); }
.ke-atas { border: 2px solid var(--unj-emas); line-height: 40px; }

/* Bilah atas dan kaki halaman memakai hijau lambang itu sendiri, bukan
   tinta gelap. Seluruh warna teks di atasnya ditala ulang ke keluarga
   hijau muda supaya kontrasnya tetap di atas ambang nyaman. */
.ak-bar { background: var(--unj-hijau); }
.ak-bar .nav > a, .ak-bar .nav-btn { color: #d8eeee; }
.ak-bar .nav > a:hover, .ak-bar .nav-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }
.ak-bar .nav > a.active, .ak-bar .nav-group.active > .nav-btn { background: rgba(255,255,255,0.20); color: #fff; }
.nav-toggle span { background: #eaf6f6; }
@media (max-width: 920px) {
  .ak-bar .nav-btn { color: #9fcfd0; }
  .ak-bar .nav-menu a { color: #d8eeee; }
}
.rekap-siapa { color: #cfe9ea; }
.rekap-siapa b { color: #fff; }
.rekap-siapa a { color: #eaf6f6; }

.site-footer { background: var(--unj-hijau); color: #cfe7e8; }
.site-footer a { color: #eaf6f6; }
.site-footer a:hover { color: #fff; }
.kaki-peta { border-bottom-color: rgba(255,255,255,0.18); }
.kaki-peta h4 { color: #a8d3d4; }
.kaki-peta a { color: #d8eeee; }
.kaki-peta a:hover { color: #fff; }
.kaki-tgl { color: #a8d3d4; }
.ke-atas { background: var(--unj-hijau); }
.ke-atas:hover { background: #01777c; }

/* ============================================================
   RASA APLIKASI: papan monitoring bergerak, bukan brosur diam
   ============================================================ */

/* Lencana data langsung dengan denyut, penanda bahwa angkanya hidup */
.langsung {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 12px;
  font-size: 11px; letter-spacing: 0.08em; color: #d9f3e6;
  background: rgba(255,255,255,0.12); border-radius: 999px; padding: 3px 12px;
}
.langsung i {
  width: 7px; height: 7px; border-radius: 999px; background: #6ee7a8;
  animation: denyut 1.6s ease-in-out infinite;
}
@keyframes denyut {
  0%, 100% { box-shadow: 0 0 0 0 rgba(110,231,168,0.55); }
  60% { box-shadow: 0 0 0 7px rgba(110,231,168,0); }
}

/* Kartu perjalanan: susunan atas identitas, bawah stepper */
.prog-pil { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px 12px; }
.prog-kartu-atas { display: flex; align-items: center; gap: 12px; min-width: 0; }
.prog-pil:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(20,35,50,0.06), 0 12px 28px rgba(20,35,50,0.13); }
.prog-pil { transition: transform 0.16s ease, box-shadow 0.16s ease; animation: kartu-masuk 0.35s ease both; }
@keyframes kartu-masuk {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Stepper mini: Daftar -> Judul -> Sempro -> Lulus */
.alur-mini { display: flex; align-items: flex-start; }
.alur-titik { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.alur-titik i {
  width: 13px; height: 13px; border-radius: 999px; z-index: 1;
  background: #e3e7ea; border: 2px solid #d0d6da; box-sizing: border-box;
}
.alur-titik em { font-style: normal; font-size: 10px; margin-top: 5px; color: var(--ink-muted); }
/* garis penghubung antartitik */
.alur-titik + .alur-titik::before {
  content: ""; position: absolute; top: 6px; right: 50%; width: 100%; height: 2px;
  background: #e3e7ea;
}
.alur-titik.sudah i { background: var(--modul-isi, var(--aksen-isi)); border-color: var(--modul, var(--accent-dark)); }
.alur-titik.sudah em { color: var(--modul, var(--accent-dark)); font-weight: 600; }
.alur-titik.sudah + .alur-titik.sudah::before { background: var(--modul-isi, var(--aksen-isi)); }
/* titik berikutnya yang sedang dituju berdenyut halus */
.alur-titik.kini i {
  background: var(--kartu); border-color: var(--modul, var(--accent-dark));
  animation: denyut-kini 1.8s ease-in-out infinite;
}
@keyframes denyut-kini {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--modul, var(--accent-dark)) 45%, transparent); }
  60% { box-shadow: 0 0 0 6px transparent; }
}
/* pendaftar belum diverifikasi: titik pertama kuning menunggu */
.status-tunggu .alur-titik.kini i { border-color: #d9a406; }
.status-tunggu .alur-titik.kini em { color: #a87e0a; }
.prog-pil.status-tunggu { box-shadow: none; }

/* Bilah kendali menempel di bawah bilah situs saat digulung, berlatar kaca */
.prog-kendali {
  position: sticky; top: 64px; z-index: 30;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 10px 2px; margin: 18px -2px 4px; border-bottom: 1px solid var(--line);
}

/* Baris tabel panel admin ikut hidup */
.rekap-tabel tbody tr { transition: background 0.12s ease; }
.rekap-tabel tbody tr:hover { background: color-mix(in srgb, var(--modul-tipis, var(--pastel-blue)) 30%, #fff); }

@media (prefers-reduced-motion: reduce) {
  .langsung i, .alur-titik.kini i { animation: none; }
  .prog-pil { animation: none; transition: none; }
  .prog-pil:hover { transform: none; }
}

/* ============================================================
   Penjernihan kartu monitoring, dari masukan pemilik
   ============================================================
   Bingkai kiri tebal warisan desain pil lama dibuang: statusnya sudah
   diceritakan stepper dan label, garis tebal hanya menambah ramai.
   Chip saring yang aktif kembali berteks putih; saat warna modul
   diikat, warna teksnya tertinggal sehingga tulisan Semua tenggelam
   di chip hijau. Kartu diberi napas: kolom lebih lebar, jarak lebih
   longgar, dan garis stepper lebih tipis. */
.mk-chip.aktif { color: #fff; }
.prog-pil,
.prog-pil.status-lulus, .prog-pil.status-sempro,
.prog-pil.status-judul, .prog-pil.status-belum, .prog-pil.status-tunggu {
  border: 1px solid #e8ecef; border-left: 1px solid #e8ecef;
}
.prog-rak { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.prog-pil { padding: 16px 18px 14px; gap: 14px; }
.prog-nama { font-size: 15px; }
.prog-status { font-size: 12.5px; }
.alur-titik + .alur-titik::before { height: 1.5px; }
.alur-titik i { width: 12px; height: 12px; }
.prog-pil.status-tunggu { background: #fbfbfa; }

/* Atribut hidden harus selalu menang. Tanpa ini, elemen yang gaya
   display-nya dinyatakan eksplisit (kartu flex, ubin grid) menolak
   disembunyikan penyaring, sehingga saringan terlihat tidak bekerja. */
[hidden] { display: none !important; }

/* Tabel monitoring dengan stepper ringkas dan halaman per sepuluh baris */
.mon-tabel td { vertical-align: middle; }
.mon-nama { display: flex; align-items: center; gap: 10px; font-weight: 600; white-space: nowrap; }
.mon-nama .prog-avatar { width: 30px; height: 30px; font-size: 11.5px; }
.mon-kel { color: var(--ink-soft); font-size: 13px; }
.alur-datar { display: inline-flex; align-items: center; width: 120px; }
.alur-datar .alur-titik i { width: 11px; height: 11px; }
.alur-datar .alur-titik + .alur-titik::before { top: 5px; }
.mon-pager {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: 18px 0 8px; font-size: 14px; color: var(--ink-soft);
}
.mon-pager button {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--kartu); color: var(--ink);
}
.mon-pager button:hover:not(:disabled) { border-color: var(--modul); color: var(--modul); }
.mon-pager button:disabled { opacity: 0.4; cursor: default; }
.tahap-tunggu { background: #fdf2d0; color: #8a6a08; }
.status-tunggu-a { background: #eee6c8 !important; color: #8a6a08 !important; }
@media (max-width: 640px) { .mon-kel, .alur-datar { display: none; } }

/* Baris chip jenjang, label kecil di depannya */
.mk-saring-jenjang { margin-top: 8px; }
.mk-saring-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin-right: 6px; align-self: center; }

/* ============================================================
   Tombol Masuk di header, plus poles bilah
   ============================================================ */
.ak-bar .nav > a.nav-masuk {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 10px; padding: 7px 16px 7px 13px;
  background: var(--unj-emas); color: #013638;
  border-radius: 999px; font-weight: 700; letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.ak-bar .nav > a.nav-masuk:hover {
  background: #ffe64d; color: #013638;
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,221,0,0.4);
}
.nav-masuk-ikon {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Di layar sempit, tombol Masuk melebar penuh di dalam menu geser */
@media (max-width: 920px) {
  .ak-bar .nav > a.nav-masuk {
    margin: 8px 12px 4px; justify-content: center; padding: 11px 16px;
  }
}

/* Poles bilah: garis emas lebih halus dengan bayangan lembut, nama situs
   diberi denyut warna emas saat disentuh */
.ak-bar {
  border-bottom-width: 2px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.12);
}
.ak-nama { transition: color 0.15s ease; }
.ak-nama:hover { color: var(--unj-emas); }

/* Blok ajakan daftar di bawah form masuk, dipisah garis halus */
.masuk-daftar {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  text-align: center;
}
.masuk-daftar p { font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; }
.masuk-daftar-tombol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 11px 16px; box-sizing: border-box;
  font-size: 15px; font-weight: 700; text-decoration: none;
  color: var(--modul, var(--accent-dark));
  background: color-mix(in srgb, var(--modul-tipis, var(--pastel-blue)) 45%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--modul, var(--accent-dark)) 30%, transparent);
  border-radius: 999px; transition: background 0.14s ease, border-color 0.14s ease;
}
.masuk-daftar-tombol:hover {
  background: color-mix(in srgb, var(--modul-tipis, var(--pastel-blue)) 70%, #fff);
  border-color: var(--modul, var(--accent-dark));
}

/* ============================================================
   POLES HALAMAN MASUK & DAFTAR: latar bergradasi, kartu berkelas
   ============================================================ */

/* Panggung bergradasi hijau lambang, dengan dua lingkaran cahaya lembut
   dan pola titik samar supaya tidak terasa datar. */
body.halaman-masuk {
  background:
    radial-gradient(circle at 18% 22%, rgba(255,221,0,0.10), transparent 42%),
    radial-gradient(circle at 84% 80%, rgba(255,255,255,0.08), transparent 45%),
    linear-gradient(150deg, #013638 0%, var(--unj-hijau, #006569) 55%, #0a7d81 100%);
}
.masuk-panggung { position: relative; }
.masuk-panggung::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Kartu putih terangkat lebih tegas, dengan pita emas tipis di puncaknya. */
.masuk-kartu {
  position: relative; z-index: 1; max-width: 430px;
  border: 0; border-radius: 18px; padding: 34px 34px 28px;
  box-shadow: 0 24px 60px rgba(1,30,32,0.35), 0 2px 8px rgba(1,30,32,0.15);
  overflow: hidden;
}
.masuk-kartu::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--unj-hijau, #006569), var(--unj-emas, #ffdd00));
}

/* Lencana gembok bundar di atas judul, penanda area terkunci. */
.masuk-kartu .kicker {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 6px; margin-bottom: 4px;
}
.masuk-kartu .kicker::before {
  content: ""; width: 20px; height: 20px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7.5a4 4 0 0 1 8 0V11'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7.5a4 4 0 0 1 8 0V11'/%3E%3C/svg%3E") center/contain no-repeat;
}
.masuk-kartu h1 { font-size: 30px; }

/* Input lebih lega, latar sedikit abu supaya bidang isian jelas. */
.masuk-input {
  padding: 12px 15px; border-radius: 10px; font-size: 15px;
  background: #f7f9fa; border: 1.5px solid #e3e8ea;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.masuk-input:focus { background: var(--kartu); }

/* Tombol utama bergradasi hijau dengan kilau halus saat disentuh. */
.masuk-tombol {
  padding: 13px 16px; font-size: 15.5px; letter-spacing: 0.01em;
  background: linear-gradient(135deg, var(--unj-hijau, #006569), #0a7d81);
  box-shadow: 0 6px 18px rgba(0,101,105,0.32);
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}
.masuk-tombol:hover {
  filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,101,105,0.42);
}

/* Tombol daftar: garis tegas dengan latar hijau tipis, jadi terbaca
   sebagai jalur kedua yang setara pentingnya, bukan tautan biasa. */
.masuk-daftar-tombol {
  padding: 12px 16px; font-size: 15px;
  border-width: 1.5px;
}

/* Tautan pulang dan intip diberi warna terang di atas latar gelap. */
.masuk-pulang a { color: rgba(255,255,255,0.85); }
.masuk-pulang a:hover { color: #fff; }

/* Bilah header di halaman auth tetap hijau; disamakan dengan panggung. */
.halaman-masuk .ak-bar { box-shadow: none; }

/* ============================================================
   LAPISAN ENERGI VISUAL — situs terasa hidup, bukan brosur datar
   ============================================================ */

/* --- Kartu pintu jadi kartu ajakan bergradasi, ikon besar di atas --- */
.ak-pintu {
  background: linear-gradient(160deg, #fff 60%, color-mix(in srgb, var(--modul-tipis, var(--pastel-blue)) 55%, #fff));
  border: 1px solid color-mix(in srgb, var(--modul, var(--accent-dark)) 14%, #fff);
  border-left: 4px solid var(--modul, var(--accent-dark));
  box-shadow: 0 2px 6px rgba(20,35,50,0.05);
  padding: 22px 22px 20px; position: relative; overflow: hidden;
}
.ak-pintu::after {
  content: "→"; position: absolute; right: 18px; bottom: 14px;
  font-size: 20px; color: var(--modul, var(--accent-dark));
  opacity: 0; transform: translateX(-6px); transition: opacity 0.18s ease, transform 0.18s ease;
}
.ak-pintu:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20,35,50,0.15); }
.ak-pintu:hover::after { opacity: 1; transform: translateX(0); }
.ak-pintu-ikon {
  font-size: 30px; line-height: 1; margin-bottom: 6px;
  display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--modul-tipis, var(--pastel-blue)) 60%, #fff);
  border-radius: 14px;
}
.ak-pintu b { font-size: 17px; }

/* --- Angka besar bergradasi, penanda capaian --- */
.ak-angka > div { position: relative; overflow: hidden; transition: transform 0.16s ease; }
.ak-angka > div:hover { transform: translateY(-2px); }
.ak-angka b {
  background: linear-gradient(135deg, var(--modul, var(--accent-dark)), color-mix(in srgb, var(--modul, var(--accent-dark)) 55%, #0a7d81));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Batang gradasi kiri judul dibuang: judul cukup diberi warna teal,
   selaras dengan gaya beranda. */

/* --- Potret beranda diberi cincin gradient --- */
.ak-potret { position: relative; }
.ak-potret::before {
  content: ""; position: absolute; inset: -6px; border-radius: 18px; z-index: -1;
  background: linear-gradient(135deg, var(--unj-hijau, #006569), var(--unj-emas, #ffdd00));
}
.ak-potret img { border-radius: 14px; position: relative; z-index: 1; }

/* --- Gerak muncul saat digulir, dimatikan bila diminta --- */
.muncul { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
.muncul.tampil { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .muncul { opacity: 1; transform: none; transition: none; }
  .ak-pintu:hover, .ak-angka > div:hover { transform: none; }
}

/* --- Kartu materi (mkl) dan kabar ikut terangkat saat disentuh --- */
.ak-mkl a { transition: transform 0.14s ease, box-shadow 0.14s ease; }
.ak-mkl a:hover { transform: translateX(3px); }

/* ============================================================
   TIPOGRAFI BERENERGI — judul tebal modern, bukan formal kaku
   ============================================================
   Judul pindah dari serif akademik ke Plus Jakarta Sans, huruf buatan
   Jakarta yang modern dan ramah. Bobotnya dinaikkan, ukurannya diperbesar,
   spasinya dirapatkan supaya terbaca tegas dan penuh energi. Badan teks
   tetap Inter demi keterbacaan paragraf panjang. */
:root { --display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; }

body.ak h1,
body.ak .ak-utama h1,
body.ak .ak-utama .hero h1,
body.ak .ak-utama .paper-head h1,
body.ak .ak-utama h2,
body.ak .section-head h2,
.prog-band h1, .admin-band h1,
.masuk-kartu h1, .ak-pintu b, .sorot-progres b,
.prog-alur-tahap b, .ak-angka b, .prog-band-angka b {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Judul beranda dibesarkan dan diberi gradient hijau-emas yang berani. */
body.ak .ak-utama > h1, .ak-intro + * ~ h1 {
  font-size: clamp(32px, 5vw, 46px); line-height: 1.08;
}
.ak-utama h1.gradasi, .prog-band h1, .admin-band h1 { letter-spacing: -0.025em; }

/* Nama situs di bilah ikut font display, lebih berkarakter. */
.ak-nama { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }

/* Judul bagian h2 sedikit lebih besar dan lebih rapat. */
body.ak .ak-utama h2 { font-size: clamp(22px, 2.6vw, 27px); font-weight: 800; }

/* Kicker jadi label kapital berwarna modul, gaya modern. */
.kicker, .prog-band-kicker, .admin-lencana {
  font-family: var(--display); font-weight: 700;
}

/* Paragraf pembuka lebih besar dan lebih hidup, bukan blok abu datar. */
.ak-intro { font-size: 21px !important; line-height: 1.45 !important; color: var(--ink) !important; font-weight: 500; }
.hero p.lead, .ak-utama p.lead { font-weight: 500; }

/* Angka besar makin tebal untuk kesan statistik yang berdenyut. */
.ak-angka b, .prog-band-angka b, .prog-alur-tahap b { font-weight: 800; letter-spacing: -0.02em; }

/* ============================================================
   MODE GELAP — tema malam untuk yang matanya lelah cahaya terang
   ============================================================
   Dibangun di atas token inti: cukup mendefinisikan ulang nilainya di
   bawah [data-theme="dark"], seluruh situs ikut berganti. Latar kartu
   lewat --kartu, garis lewat --line, tinta teks lewat --ink. Warna
   modul dibuat lebih terang di latar gelap supaya tetap menyala. */
:root[data-theme="dark"] {
  --bg: #0f141a;
  --surface: #161c24;
  --kartu: #1a222c;
  --campur: #1a222c;
  --ink: #e7ecf1;
  --ink-soft: #aab4c0;
  --ink-muted: #8390a0;
  --line: #2a333f;
  --accent: #5b9bd8;
  --accent-dark: #7db4e8;
  --pastel-gray: #1a222c;
  --bayang-kartu: 0 1px 2px rgba(0,0,0,0.3), 0 6px 20px rgba(0,0,0,0.35);
}
/* Warna modul versi terang untuk latar gelap */
:root[data-theme="dark"] body[data-grup="mengajar"],
:root[data-theme="dark"] body[data-grup="beranda"]      { --modul: #3fb59a; --modul-tipis: #14312c; }
:root[data-theme="dark"] body[data-grup="bedah-publikasi"] { --modul: #5b9bd8; --modul-tipis: #14283c; }
:root[data-theme="dark"] body[data-grup="penelitian"]    { --modul: #a98fe0; --modul-tipis: #241d38; }
:root[data-theme="dark"] body[data-grup="kolaborasi"]    { --modul: #4fc27f; --modul-tipis: #12301f; }
:root[data-theme="dark"] body[data-grup="profil"]        { --modul: #d69a63; --modul-tipis: #331f0f; }

/* Kartu pintu di mode gelap: gradasi dari surface ke tint modul gelap */
:root[data-theme="dark"] .ak-pintu {
  background: linear-gradient(160deg, var(--kartu) 60%, var(--modul-tipis));
  border-color: color-mix(in srgb, var(--modul) 30%, var(--kartu));
}
:root[data-theme="dark"] .ak-pintu-ikon { background: #222c38; }

/* Ikon kartu materi & sampul: beri sedikit peredup supaya tak silau */
:root[data-theme="dark"] img:not([src*=".svg"]) { filter: brightness(0.92); }

/* Input di mode gelap */
:root[data-theme="dark"] .masuk-input { background: #10161d; border-color: #2a333f; }
:root[data-theme="dark"] .masuk-input:focus { background: #161c24; }
:root[data-theme="dark"] .prog-cari { background: #10161d; }

/* Tombol pengalih tema di bilah */
.tema-tombol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-left: 8px; flex-shrink: 0;
  background: rgba(255,255,255,0.10); border: 0; border-radius: 999px;
  cursor: pointer; color: #fff; font-size: 17px; line-height: 1;
  transition: background 0.15s ease, transform 0.15s ease;
}
.tema-tombol:hover { background: rgba(255,255,255,0.20); transform: rotate(15deg); }
@media (max-width: 920px) { .tema-tombol { margin: 8px 0 4px auto; } }

/* Halaman auth di mode gelap: latar tetap gradasi hijau gelap (sudah cocok) */
:root[data-theme="dark"] .masuk-kartu { background: var(--kartu); }

/* --- Mode gelap: pil dan panel bertint, gaya tint-transparan + teks cerah --- */
:root[data-theme="dark"] {
  --pastel-blue: #14283c; --pastel-mint: #12301f;
  --pastel-butter: #322a0a; --pastel-rose: #331a24; --pastel-gray: #222c38;
}
:root[data-theme="dark"] .glos-chip {
  background: rgba(91,155,216,0.16); color: #8fc0ef; border-color: rgba(91,155,216,0.3);
}
:root[data-theme="dark"] .glos-chip:hover { background: rgba(91,155,216,0.28); }
:root[data-theme="dark"] .badge.q1,
:root[data-theme="dark"] .badge.q2,
:root[data-theme="dark"] .badge.q3,
:root[data-theme="dark"] .badge.kutip { background: rgba(91,155,216,0.18); color: #8fc0ef; }
:root[data-theme="dark"] .badge.sinta,
:root[data-theme="dark"] .badge.status-terbit { background: rgba(79,194,127,0.18); color: #6fd79b; }
:root[data-theme="dark"] .badge.status-revisi { background: rgba(214,180,60,0.2); color: #e2c56a; }
:root[data-theme="dark"] .badge.status-proses,
:root[data-theme="dark"] .badge.jenis { background: rgba(255,255,255,0.09); color: #aab4c0; }
:root[data-theme="dark"] .badge.baru { background: rgba(216,120,150,0.2); color: #e79ab0; }

/* Pil statistik di atas foto: latar gelap transparan */
:root[data-theme="dark"] .statbar {
  background: rgba(20,26,34,0.6); border-color: rgba(255,255,255,0.12);
}
:root[data-theme="dark"] .statbar .s { color: var(--ink-soft); border-right-color: rgba(255,255,255,0.12); }
:root[data-theme="dark"] .statbar b { color: var(--modul, #5b9bd8); }

/* Band kini transparan; tak perlu latar gelap khusus */
:root[data-theme="dark"] .band { background: transparent; }

/* Batang kemajuan bimbingan & elemen lajur abu di mode gelap */
:root[data-theme="dark"] .bim-batang { background: #222c38; }
:root[data-theme="dark"] .bim-legenda i { background: #222c38; }
:root[data-theme="dark"] .prog-alur-tahap { background: var(--kartu); }
:root[data-theme="dark"] .prog-alur-tahap i,
:root[data-theme="dark"] .alur-titik i { background: #2a333f; border-color: #3a4653; }
:root[data-theme="dark"] .alur-titik + .alur-titik::before { background: #2a333f; }
:root[data-theme="dark"] .mk-chip { background: var(--kartu); border-color: var(--line); color: var(--ink-soft); }
:root[data-theme="dark"] .rekap-tabel th { border-bottom-color: var(--line); }
:root[data-theme="dark"] .mon-tabel td, :root[data-theme="dark"] .rekap-tabel td { border-bottom-color: var(--line); }

/* ============================================================
   BERANDA BARU — hero berani, stat besar, bukan dinding teks
   ============================================================ */
.hero-x {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--modul, #006569) 22%, transparent), transparent 45%),
    radial-gradient(circle at 90% 90%, rgba(255,221,0,0.12), transparent 42%),
    linear-gradient(160deg, var(--surface), var(--bg));
  border-bottom: 1px solid var(--line);
}
.hero-x-isi {
  max-width: var(--lebar-bingkai, 1216px); margin: 0 auto;
  padding: 56px 26px 60px; display: grid; grid-template-columns: 1.2fr 0.8fr;
  gap: 44px; align-items: center;
}
.hero-x-kicker {
  display: inline-block; font-family: var(--display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--modul, var(--accent-dark));
  background: var(--modul-tipis, var(--pastel-blue)); padding: 6px 14px;
  border-radius: 999px; margin: 0 0 18px;
}
.hero-x h1 {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(34px, 5.4vw, 60px); line-height: 1.03; margin: 0 0 18px; color: var(--ink);
}
.sorot-kata {
  background: linear-gradient(120deg, var(--modul, #006569), var(--unj-emas, #ffdd00));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-x-sub { font-size: 18px; line-height: 1.55; color: var(--ink-soft); max-width: 30em; margin: 0 0 26px; font-weight: 500; }
.hero-x-aksi { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.tombol-x {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 15.5px;
  padding: 13px 24px; border-radius: 999px; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.tombol-x.utama {
  color: #fff; background: linear-gradient(135deg, var(--modul-isi, #006569), #0a7d81);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--modul, #006569) 40%, transparent);
}
.tombol-x.utama:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 14px 30px color-mix(in srgb, var(--modul, #006569) 50%, transparent); }
.tombol-x.kedua {
  color: var(--ink); background: var(--kartu); border: 1.5px solid var(--line);
}
.tombol-x.kedua:hover { transform: translateY(-2px); border-color: var(--modul, var(--accent-dark)); color: var(--modul, var(--accent-dark)); }
.hero-x-tautan { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.hero-x-tautan a { color: var(--ink-muted); text-decoration: none; }
.hero-x-tautan a:hover { color: var(--modul, var(--accent-dark)); text-decoration: underline; }

.hero-x-potret { position: relative; justify-self: center; text-align: center; }
.hero-x-bingkai { position: relative; width: 100%; max-width: 300px; margin: 0 auto; }
.hero-x-potret img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  border-radius: 24px; position: relative; z-index: 1;
  box-shadow: 0 24px 60px rgba(20,35,50,0.24);
}
.hero-x-nama { margin-top: 16px; }
.hn-nama {
  font-family: var(--display); font-weight: 800; font-size: 23px;
  letter-spacing: -0.01em; color: var(--ink); margin: 0;
}
.hn-peran { font-size: 14.5px; color: var(--ink-soft); margin: 4px 0 0; }
.hero-x-chip {
  position: absolute; z-index: 2; font-family: var(--display); font-weight: 700;
  font-size: 14px; color: var(--ink); background: var(--kartu);
  padding: 9px 15px; border-radius: 999px; box-shadow: 0 8px 22px rgba(20,35,50,0.18);
  display: inline-flex; align-items: center; gap: 7px;
}
.hero-x-chip::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--modul, #006569); }
.hero-x-chip.chip-1 { top: -16px; left: -18px; }
.hero-x-chip.chip-2 { bottom: 14%; right: -14px; }

/* Stat strip besar di bawah hero */
.stat-strip {
  max-width: var(--lebar-bingkai, 1216px); margin: -30px auto 0; position: relative; z-index: 3;
  padding: 0 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.stat-strip > div {
  background: var(--kartu); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 22px; box-shadow: var(--bayang-kartu); text-align: left;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.stat-strip > div:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20,35,50,0.14); }
.stat-strip b {
  display: block; font-family: var(--display); font-weight: 800; font-size: 38px; line-height: 1;
  letter-spacing: -0.03em; margin-bottom: 6px;
  background: linear-gradient(135deg, var(--modul, #006569), color-mix(in srgb, var(--modul, #006569) 55%, #0a7d81));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-strip span { font-size: 13.5px; color: var(--ink-soft); }

.beranda-bawah { max-width: 964px; margin: 0 auto; padding: 54px 26px 70px; }

/* Warna dipindah ke judul besar (ganti kebiasaan border/aksen kotak).
   Sekaligus matikan garis bawah bawaan .ak-utama h2 yang cuma cocok di artikel. */
.beranda-bawah > h2, .karya-kepala h2, .ak-utama .hook-judul {
  color: var(--modul, var(--accent-dark));
  border-bottom: 0; padding-bottom: 0;
}
.ak-utama .hook-judul { margin-top: 0; }

@media (max-width: 860px) {
  .hero-x-isi { grid-template-columns: 1fr; gap: 30px; text-align: center; padding-top: 40px; }
  .hero-x-kicker, .hero-x h1, .hero-x-sub { text-align: center; }
  .hero-x-sub { margin-left: auto; margin-right: auto; }
  .hero-x-aksi, .hero-x-tautan { justify-content: center; }
  .hero-x-potret { order: -1; }
  .hero-x-bingkai { max-width: 240px; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) { .stat-strip { grid-template-columns: 1fr 1fr; } .stat-strip b { font-size: 30px; } }

.hero-x-teks { min-width: 0; }

/* ============================================================
   Gerbang beranda — kartu pengantar ke halaman dalam
   ============================================================ */
.beranda-sub { font-size: 16px; color: var(--ink-soft); margin: -6px 0 22px; }
.gerbang { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gerbang-kartu {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 22px 22px 44px; text-decoration: none; color: var(--ink);
  background: var(--kartu); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--bayang-kartu);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  overflow: hidden;
}
.gerbang-kartu:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(20,35,50,0.16); border-color: color-mix(in srgb, var(--modul, var(--accent-dark)) 30%, var(--line)); }
.gerbang-emoji {
  font-size: 26px; line-height: 1; width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--modul-tipis, var(--pastel-blue)); border-radius: 14px; margin-bottom: 4px;
}
.gerbang-kartu b { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.gerbang-ket { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.gerbang-panah {
  position: absolute; right: 20px; bottom: 18px; font-size: 20px;
  color: var(--modul, var(--accent-dark)); opacity: 0.5;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.gerbang-kartu:hover .gerbang-panah { opacity: 1; transform: translateX(4px); }

/* Kartu unggulan: lebar penuh, gradasi, teks terang */
.gerbang-kartu.besar {
  grid-column: 1 / -1; flex-direction: column; color: #eaf6f6;
  background: linear-gradient(135deg, #012f31 8%, var(--unj-hijau, #006569) 90%);
  border: 0; padding: 28px 28px 30px;
}
.gerbang-kartu.besar b { color: #fff; font-size: 24px; }
.gerbang-kartu.besar .gerbang-ket { color: #bfe0e0; max-width: 46em; }
.gerbang-kartu.besar .gerbang-emoji { background: rgba(255,255,255,0.12); }
.gerbang-kartu.besar .gerbang-panah { color: var(--unj-emas, #ffdd00); opacity: 1; font-size: 24px; }
.gerbang-atas { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.gerbang-lencana {
  font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #012f31; background: var(--unj-emas, #ffdd00);
  padding: 4px 12px; border-radius: 999px;
}
@media (max-width: 760px) { .gerbang { grid-template-columns: 1fr; } }

/* Footer kolom identitas ringkas (menggantikan router persona) */
.kaki-brand-nama { font-family: var(--display); font-weight: 800; font-size: 17px; color: #f3f6f9; margin: 0 0 8px; }
.kaki-brand-ket { font-size: 13.5px; line-height: 1.6; color: #a8c3c0; margin: 0; max-width: 30em; }
.kaki-brand { min-width: 0; }

/* ============================================================
   Karya terbaru — etalase sampul buku & paper 2026 (nilai jual)
   ============================================================ */
.karya { margin-top: 46px; }
.karya-kepala { margin-bottom: 22px; }
.karya-kicker {
  font-family: var(--display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--modul, var(--accent-dark)); margin: 0 0 6px;
}
.karya-kepala h2 { margin: 0 0 6px; }
.karya-sub { font-size: 15.5px; color: var(--ink-soft); margin: 0; max-width: 42em; }

.karya-rak {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.karya-kartu {
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: var(--ink);
}
.karya-sampul {
  position: relative; display: block; aspect-ratio: 400 / 552;
  border-radius: 14px; overflow: hidden;
  background: var(--kartu);
  box-shadow: 0 10px 26px rgba(20,35,50,0.16), 0 2px 6px rgba(20,35,50,0.10);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.karya-sampul img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.35s ease;
}
.karya-kartu:hover .karya-sampul { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(20,35,50,0.24), 0 4px 10px rgba(20,35,50,0.12); }
.karya-kartu:hover .karya-sampul img { transform: scale(1.05); }
.karya-badge {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--display); font-weight: 800; font-size: 11px;
  letter-spacing: 0.03em; padding: 5px 11px; border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.22); backdrop-filter: blur(2px);
}
.k-q1 { background: var(--unj-emas, #ffdd00); color: #1a1500; }
.k-q2 { background: #1f9d8f; color: #fff; }
.k-buku { background: var(--unj-merah, #cf1e2e); color: #fff; }
.karya-teks { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.karya-teks b {
  font-family: var(--display); font-weight: 800; font-size: 15.5px;
  line-height: 1.25; letter-spacing: -0.01em; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color 0.16s ease;
}
.karya-kartu:hover .karya-teks b { color: var(--modul, var(--accent-dark)); }
.karya-venue {
  font-size: 12.5px; line-height: 1.4; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.karya-thn { font-size: 12px; font-weight: 600; color: var(--ink-muted); }

@media (max-width: 860px) { .karya-rak { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 420px) { .karya-rak { grid-template-columns: 1fr 1fr; gap: 12px; } .karya-teks b { font-size: 14px; } }

/* Mode gelap: sampul tetap terang, badge Q2 sedikit dinaikkan */
:root[data-theme="dark"] .karya-sampul { box-shadow: 0 12px 30px rgba(0,0,0,0.5); }
:root[data-theme="dark"] .k-q2 { background: #2bb3a3; }

/* Kontak footer: satu baris horizontal, bisa digeser bila sempit */
.kaki-kontak ul {
  display: flex; flex-wrap: nowrap; gap: 24px; margin: 0;
  overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.kaki-kontak ul::-webkit-scrollbar { display: none; }
.kaki-kontak li { margin: 0; flex: 0 0 auto; white-space: nowrap; }

/* ============================================================
   Hook — ikon berwarna, tanpa kotak, terpusat (pertanyaan user)
   ============================================================ */
.hook { margin: 40px auto 0; max-width: 760px; padding: 0 26px; text-align: center; }
.hook-judul { margin: 0 0 8px; }
.hook-sub { font-size: 15px; color: var(--ink-soft); margin: 0 auto 26px; max-width: 32em; }
.hook-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hook-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-decoration: none; color: var(--ink);
}
.hook-ikon {
  width: 58px; height: 58px; border-radius: 50%; margin-bottom: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(20,35,50,0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hook-ikon svg {
  width: 27px; height: 27px; fill: none; stroke: #fff; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.i-mulai  { background: linear-gradient(140deg, #0a7c80, #04565a); }
.i-jurnal { background: linear-gradient(140deg, #f0a91e, #d98a0c); }
.i-review { background: linear-gradient(140deg, #ef5b63, #cf1e2e); }
.hook-item:hover .hook-ikon { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(20,35,50,0.22); }
.hook-item b {
  font-family: var(--display); font-weight: 800; font-size: 17px;
  line-height: 1.2; letter-spacing: -0.01em; color: var(--ink);
}
.hook-ket { font-size: 13px; line-height: 1.45; color: var(--ink-soft); max-width: 17em; }
.hook-aksi {
  margin-top: 5px; font-family: var(--display); font-weight: 700; font-size: 13.5px;
  color: var(--modul, var(--accent-dark));
}
.hook-panah { display: inline-block; transition: transform 0.16s ease; }
.hook-item:hover .hook-panah { transform: translateX(4px); }
@media (max-width: 640px) { .hook-strip { grid-template-columns: 1fr; gap: 24px; max-width: 300px; margin: 0 auto; } }

/* ============================================================
   Materi kuliah — etalase 4 mata kuliah (gaya sama Karya terbaru)
   ============================================================ */
.materi { margin-top: 46px; }
.materi-kepala { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.materi-kepala-teks { min-width: 0; }
.materi-kicker {
  font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--modul, var(--accent-dark)); margin: 0 0 6px;
}
.materi-kepala h2 { margin: 0; }
.materi-semua {
  font-family: var(--display); font-weight: 700; font-size: 14.5px; white-space: nowrap;
  color: var(--modul, var(--accent-dark)); text-decoration: none;
}
.materi-semua span { display: inline-block; transition: transform 0.16s ease; }
.materi-semua:hover span { transform: translateX(4px); }
.materi-rak { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.materi-kartu { display: flex; flex-direction: column; gap: 9px; text-decoration: none; color: var(--ink); }
.materi-sampul {
  display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  background: var(--kartu); box-shadow: 0 8px 20px rgba(20,35,50,0.14);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.materi-sampul img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.materi-kartu:hover .materi-sampul { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20,35,50,0.22); }
.materi-kartu:hover .materi-sampul img { transform: scale(1.05); }
.materi-kartu b {
  font-family: var(--display); font-weight: 800; font-size: 15px; line-height: 1.25;
  letter-spacing: -0.01em; color: var(--ink); transition: color 0.16s ease;
}
.materi-kartu:hover b { color: var(--modul, var(--accent-dark)); }
.materi-jml { font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 820px) { .materi-rak { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .materi-rak { grid-template-columns: 1fr 1fr; gap: 12px; } .materi-kartu b { font-size: 13.5px; } }

/* ============================================================
   Template "pintu bagian" — hero halaman + bagian ber-kartu
   (dipakai landing tiap bagian: Pengajaran, Penelitian, dll.)
   ============================================================ */
.hal-hero { padding-top: 4px; margin-bottom: 8px; }
.hal-hero h1 {
  font-family: var(--display, var(--sans)); font-weight: 800;
  font-size: clamp(32px, 5vw, 46px); letter-spacing: -0.022em; line-height: 1.05;
  margin: 2px 0 6px;
}
.hal-lead {
  font-size: 19px; line-height: 1.5; color: var(--ink-soft);
  max-width: 40em; margin: 6px 0 22px; font-weight: 500;
}
.hal-aksi { display: flex; gap: 12px; flex-wrap: wrap; }
.hal-bagian { margin-top: 44px; }
.hal-sub { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); margin: -2px 0 20px; max-width: 46em; }
.hal-tautan {
  display: inline-block; margin-top: 6px; font-family: var(--display); font-weight: 700;
  font-size: 15px; color: var(--modul, var(--accent-dark)); text-decoration: none;
}
.hal-tautan span { display: inline-block; transition: transform 0.16s ease; }
.hal-tautan:hover span { transform: translateX(4px); }
.kursus-rak { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }

/* Tema riset: grid dua kolom tanpa kotak */
.tema-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 30px; }
.tema-kartu { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tema-kartu b { font-family: var(--display, var(--sans)); font-weight: 800; font-size: 16.5px; color: var(--ink); }
.tema-kartu span { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 600px) { .tema-grid { grid-template-columns: 1fr; gap: 18px; } }

/* Badge tambahan untuk etalase publikasi */
.k-q3 { background: #64748b; color: #fff; }
.k-sinta { background: #7c5cc4; color: #fff; }
:root[data-theme="dark"] .k-q3 { background: #8595a8; }
:root[data-theme="dark"] .k-sinta { background: #9878e0; }

/* Nota penekanan di hero (mis. poin APC), tanpa kotak */
.hal-nota { font-size: 15px; line-height: 1.55; color: var(--modul, var(--accent-dark)); font-weight: 600; margin: -6px 0 20px; max-width: 46em; }

/* Fan-out hub: direktori tautan ke sub-halaman, tanpa kotak */
.hub-tautan { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 18px; margin-top: 4px; }
.hub-tautan a { display: block; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--ink); transition: background 0.15s ease; }
.hub-tautan a:hover { background: var(--modul-tipis, var(--pastel-blue)); }
.hub-tautan b { display: block; font-family: var(--display, var(--sans)); font-weight: 700; font-size: 15.5px; color: var(--ink); }
.hub-tautan b::after { content: " \2192"; color: var(--modul, var(--accent-dark)); }
.hub-tautan span { display: block; font-size: 13px; line-height: 1.45; color: var(--ink-soft); margin-top: 2px; }
@media (max-width: 620px) { .hub-tautan { grid-template-columns: 1fr; } }
.hal-tautan-baris { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* Footer: item grid harus bisa menyusut di mobile agar tak meluber */
.kaki-peta > div { min-width: 0; }

/* Tombol CTA monitoring: mencolok, memancing klik ke detail */
.bim-cta { margin: 10px 0 14px; }
.cta-monitor {
  display: flex; align-items: center; gap: 16px; padding: 18px 22px;
  border-radius: 16px; text-decoration: none; color: #eaf6f6;
  background: linear-gradient(135deg, #012f31 8%, var(--unj-hijau, #006569) 90%);
  box-shadow: 0 12px 30px rgba(0, 101, 105, 0.28);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.cta-monitor:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(0, 101, 105, 0.38); }
.cta-monitor-ikon {
  font-size: 26px; width: 52px; height: 52px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.14); border-radius: 13px;
}
.cta-monitor-teks { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cta-monitor-teks b { font-family: var(--display, var(--sans)); font-weight: 800; font-size: 18px; color: #fff; }
.cta-monitor-teks span { font-size: 13.5px; line-height: 1.4; color: #bfe0e0; }
.cta-monitor-panah { margin-left: auto; flex-shrink: 0; font-size: 24px; color: var(--unj-emas, #ffdd00); transition: transform 0.16s ease; }
.cta-monitor:hover .cta-monitor-panah { transform: translateX(4px); }
@media (max-width: 480px) { .cta-monitor { padding: 15px 16px; gap: 12px; } .cta-monitor-teks b { font-size: 16px; } }

/* ============================================================
   Kelola & unduh materi (panel admin + halaman publik)
   ============================================================ */
.admin-utama { max-width: 940px; margin: 0 auto; padding: 26px 26px 64px; }
.admin-kartu {
  background: var(--kartu); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 24px 26px; margin-bottom: 22px; box-shadow: var(--bayang-kartu);
}
.admin-kartu h2 { margin: 0 0 14px; font-size: 20px; }
.materi-form { display: grid; gap: 4px; }
.materi-form select.masuk-input { appearance: auto; }
.admin-pesan {
  background: var(--pastel-mint, #e6f6ec); color: #1d5c3a; border-radius: 12px;
  padding: 12px 16px; font-weight: 600; margin: 0 0 18px;
}
.admin-kosong { color: var(--ink-soft); margin: 0; }
.materi-mk-judul { font-family: var(--display, var(--sans)); font-weight: 800; font-size: 15px; margin: 20px 0 8px; color: var(--modul, var(--accent-dark)); }
.materi-mk-judul span { color: var(--ink-muted); font-weight: 600; }
.materi-kelola { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.materi-kelola li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.materi-kelola-teks { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.materi-kelola-teks b { font-weight: 700; font-size: 14.5px; }
.materi-kelola-teks > span { font-size: 12.5px; color: var(--ink-soft); }
.materi-kelola-meta { color: var(--ink-muted) !important; }
.materi-kelola form { margin-left: auto; flex-shrink: 0; }
.materi-hapus {
  background: none; border: 1px solid var(--line); color: var(--unj-merah, #cf1e2e);
  border-radius: 999px; padding: 7px 14px; font-family: var(--display, var(--sans));
  font-weight: 700; font-size: 13px; cursor: pointer;
}
.materi-hapus:hover { background: var(--unj-merah, #cf1e2e); color: #fff; border-color: transparent; }
.admin-pulang { margin-top: 10px; }
.admin-pulang a { color: var(--modul, var(--accent-dark)); text-decoration: none; font-weight: 600; }

/* Daftar unduhan publik */
.unduh-daftar { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 760px; }
.unduh-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px;
  text-decoration: none; color: var(--ink); background: var(--kartu); border: 1px solid var(--line);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.unduh-item:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20,35,50,0.12); border-color: color-mix(in srgb, var(--modul, var(--accent-dark)) 30%, var(--line)); }
.unduh-ikon { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--modul-tipis, var(--pastel-blue)); border-radius: 11px; color: var(--modul, var(--accent-dark)); }
.unduh-ikon svg { width: 22px; height: 22px; }
.unduh-teks { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.unduh-teks b { font-family: var(--display, var(--sans)); font-weight: 800; font-size: 15.5px; }
.unduh-ket { font-size: 13px; color: var(--ink-soft); }
.unduh-meta { font-size: 12px; color: var(--ink-muted); }
.unduh-aksi { margin-left: auto; flex-shrink: 0; font-family: var(--display, var(--sans)); font-weight: 700; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--modul-isi, #006569), #0a7d81); padding: 9px 16px; border-radius: 999px; }
@media (max-width: 520px) { .unduh-aksi { padding: 8px 12px; font-size: 13px; } .unduh-ket { display: none; } }

/* Bilah menu panel admin */
.admin-menu { max-width: 940px; margin: 22px auto 4px; padding: 0 26px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin-menu a, .admin-menu-segera { font-family: var(--display, var(--sans)); font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 999px; text-decoration: none; }
.admin-menu a { color: var(--ink-soft); background: var(--kartu); border: 1px solid var(--line); transition: border-color 0.15s ease, color 0.15s ease; }
.admin-menu a:hover { border-color: var(--modul, var(--accent-dark)); color: var(--modul, var(--accent-dark)); }
.admin-menu a.active { background: var(--modul-isi, var(--aksen-isi)); color: #fff; border-color: transparent; }
.admin-menu-segera { color: var(--ink-muted); background: none; border: 1px dashed var(--line); cursor: default; }
.admin-menu-segera em { font-style: normal; font-size: 11px; opacity: 0.75; margin-left: 5px; }

/* Baris tiga kolom di form paper + sampul cadangan bila tak ada gambar */
.materi-form-baris { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr; gap: 2px 14px; }
@media (max-width: 560px) { .materi-form-baris { grid-template-columns: 1fr; } }
.karya-sampul-kosong {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--display, var(--sans)); font-weight: 800; font-size: 58px; color: #eaf6f6;
  background: linear-gradient(140deg, #0a7c80, #04565a);
}

/* Beranda panel admin: kartu menu ke tiap bagian */
.admin-pintu-rak { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 8px; }
.admin-pintu {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 24px 22px 46px; text-decoration: none; color: var(--ink);
  background: var(--kartu); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--bayang-kartu);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.admin-pintu:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(20,35,50,0.16); border-color: color-mix(in srgb, var(--modul, var(--accent-dark)) 30%, var(--line)); }
.admin-pintu-ikon { font-size: 26px; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: var(--modul-tipis, var(--pastel-blue)); border-radius: 14px; margin-bottom: 4px; }
.admin-pintu b { font-family: var(--display, var(--sans)); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.admin-pintu-ket { font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.admin-pintu-tanda { font-family: var(--display, var(--sans)); font-weight: 700; font-size: 13px; color: var(--modul, var(--accent-dark)); margin-top: 2px; }
.admin-pintu-panah { position: absolute; right: 20px; bottom: 18px; font-size: 20px; color: var(--modul, var(--accent-dark)); opacity: 0.5; transition: opacity 0.16s ease, transform 0.16s ease; }
.admin-pintu:hover .admin-pintu-panah { opacity: 1; transform: translateX(4px); }

/* ============================================================
   Perbaikan kontras mode gelap
   ============================================================ */
/* Judul kartu materi/karya sempat terkunci warna terang lewat text-fill
   warisan, jadi gelap-di-gelap. Paksa ikut token dan netralkan text-fill. */
.karya-teks b, .materi-kartu b { -webkit-text-fill-color: currentColor; }
:root[data-theme="dark"] .karya-teks b,
:root[data-theme="dark"] .materi-kartu b {
  color: var(--ink); -webkit-text-fill-color: var(--ink);
}
/* Header tabel banding dan pemisah remah agar terbaca di gelap */
:root[data-theme="dark"] table.banding thead th { background: #1b2530; color: #cfdae8; }
:root[data-theme="dark"] .remah-pisah { color: #6b7887; }

/* Statistik admin */
.stat-ringkas { margin-bottom: 22px; }
.stat-tabel { width: 100%; border-collapse: collapse; }
.stat-tabel td { padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }
.stat-tabel tr:last-child td { border-bottom: 0; }
.stat-tabel td a { color: var(--modul, var(--accent-dark)); text-decoration: none; word-break: break-all; }
.stat-tabel td a:hover { text-decoration: underline; }
.stat-tabel .stat-n { text-align: right; white-space: nowrap; font-family: var(--display, var(--sans)); font-weight: 700; color: var(--ink); width: 80px; }

/* Bagian "Terbaru di portal" di beranda (diisi otomatis dari manifes) */
.terbaru { max-width: 964px; margin: 0 auto; padding: 44px 26px 0; }
.terbaru-kepala { margin-bottom: 16px; }
.terbaru-kicker { font-family: var(--display, var(--sans)); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--modul, var(--accent-dark)); margin: 0 0 4px; }
.terbaru-kepala h2 { margin: 0; color: var(--modul, var(--accent-dark)); }
.terbaru-rak { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.terbaru-kartu { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 14px; text-decoration: none; color: var(--ink); background: var(--kartu); border: 1px solid var(--line); transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; }
.terbaru-kartu:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(20,35,50,0.12); border-color: color-mix(in srgb, var(--modul, var(--accent-dark)) 30%, var(--line)); }
.terbaru-tipe { align-self: flex-start; font-family: var(--display, var(--sans)); font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.t-materi { background: color-mix(in srgb, var(--modul, #006569) 15%, transparent); color: var(--modul, #006569); }
.t-paper { background: rgba(22,121,74,0.16); color: #1f9d6a; }
.t-buku { background: rgba(207,30,46,0.15); color: #e0576a; }
.terbaru-kartu b { font-family: var(--display, var(--sans)); font-weight: 800; font-size: 15px; line-height: 1.3; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.terbaru-ket { font-size: 12.5px; color: var(--ink-soft); }

/* "Lanjut belajar": langkah berikutnya di akhir halaman panduan */
.lanjut-belajar { margin-top: 6px; padding-top: 28px; border-top: 1px solid var(--line); }
.lanjut-belajar-judul { font-family: var(--display, var(--sans)); font-weight: 800; font-size: 12.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 14px; }
.lanjut-belajar-rak { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.lanjut-belajar-rak a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 14px; text-decoration: none; color: var(--ink); background: var(--kartu); border: 1px solid var(--line); transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; }
.lanjut-belajar-rak a:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(20,35,50,0.12); border-color: color-mix(in srgb, var(--modul, var(--accent-dark)) 30%, var(--line)); }
.lanjut-belajar-rak b { font-family: var(--display, var(--sans)); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; color: var(--modul, var(--accent-dark)); }
.lanjut-belajar-rak b::after { content: " \2192"; }
.lanjut-belajar-rak span { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }

/* Tombol "Simpan untuk nanti" mengambang + halaman tersimpan */
.simpan-apung {
  position: fixed; left: 18px; bottom: 18px; z-index: 40;
  font-family: var(--display, var(--sans)); font-weight: 700; font-size: 13.5px;
  color: var(--ink); background: var(--kartu); border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 16px; cursor: pointer;
  box-shadow: 0 8px 22px rgba(20,35,50,0.16); transition: transform 0.15s ease, border-color 0.15s ease;
}
.simpan-apung:hover { transform: translateY(-2px); border-color: var(--modul, var(--accent-dark)); }
.simpan-apung.aktif { background: var(--modul-isi, var(--aksen-isi)); color: #fff; border-color: transparent; }
@media (max-width: 560px) { .simpan-apung { left: 12px; bottom: 12px; font-size: 12.5px; padding: 9px 13px; } }
.tersimpan-rak { display: grid; gap: 10px; max-width: 680px; }
.simpan-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--kartu); }
.simpan-item a { flex: 1; min-width: 0; text-decoration: none; color: var(--ink); }
.simpan-item a b { font-family: var(--display, var(--sans)); font-weight: 700; font-size: 15px; }
.simpan-item a:hover b { color: var(--modul, var(--accent-dark)); }
.simpan-hapus { flex-shrink: 0; background: none; border: 1px solid var(--line); color: var(--unj-merah, #cf1e2e); border-radius: 999px; padding: 6px 13px; font-family: var(--display, var(--sans)); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.simpan-hapus:hover { background: var(--unj-merah, #cf1e2e); color: #fff; border-color: transparent; }

/* Tanya jawab (komentar) */
.komentar-wrap { margin-top: 6px; padding-top: 28px; border-top: 1px solid var(--line); }
.komentar-wrap h2 { margin: 0 0 4px; }
.komentar-sub { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 18px; max-width: 44em; }
.komentar-form { display: grid; gap: 10px; max-width: 560px; margin-bottom: 26px; }
.komentar-form textarea.masuk-input { resize: vertical; min-height: 84px; font-family: inherit; }
.komentar-form .kf-web { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.komentar-form .masuk-tombol { justify-self: start; }
.kf-pesan { font-size: 13.5px; color: var(--modul, var(--accent-dark)); margin: 2px 0 0; min-height: 1em; }
.komentar-daftar { display: grid; gap: 14px; max-width: 640px; }
.komentar-kosong { color: var(--ink-soft); font-size: 14px; }
.komentar-item { padding: 15px 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--kartu); }
.komentar-kepala { display: flex; align-items: baseline; gap: 10px; margin: 0 0 5px; }
.komentar-kepala b { font-family: var(--display, var(--sans)); font-weight: 700; font-size: 14.5px; }
.komentar-kepala span { font-size: 12px; color: var(--ink-muted); }
.komentar-isi { font-size: 14.5px; line-height: 1.6; color: var(--ink); margin: 0; }
.komentar-balas { margin: 12px 0 0; padding: 12px 14px; border-radius: 11px; background: var(--modul-tipis, var(--pastel-blue)); }
.komentar-balas b { display: block; font-family: var(--display, var(--sans)); font-weight: 700; font-size: 12.5px; color: var(--modul, var(--accent-dark)); margin-bottom: 3px; }
.komentar-balas p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }

/* Moderasi tanya jawab (admin) */
.mod-item { padding: 15px 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--kartu); margin-bottom: 12px; }
.mod-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px; margin: 0 0 6px; font-size: 12.5px; }
.mod-meta b { font-family: var(--display, var(--sans)); font-weight: 700; font-size: 14.5px; color: var(--ink); }
.mod-meta span { color: var(--ink-muted); }
.mod-meta a { color: var(--modul, var(--accent-dark)); text-decoration: none; word-break: break-all; }
.mod-isi { font-size: 14.5px; line-height: 1.6; margin: 0 0 10px; color: var(--ink); }
.mod-balas-form { display: grid; gap: 8px; }
.mod-balas-form textarea.masuk-input { resize: vertical; font-family: inherit; min-height: 56px; }
.mod-aksi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mod-aksi .masuk-tombol { padding: 9px 16px; font-size: 13.5px; }
.mod-setuju { background: none; border: 1px solid var(--modul, var(--accent-dark)); color: var(--modul, var(--accent-dark)); border-radius: 999px; padding: 8px 15px; font-family: var(--display, var(--sans)); font-weight: 700; font-size: 13px; cursor: pointer; }
.mod-setuju:hover { background: var(--modul-isi, var(--aksen-isi)); color: #fff; }
.mod-jml { font-family: var(--display, var(--sans)); font-size: 14px; color: var(--ink-muted); font-weight: 700; }

/* Beranda: rapatkan jarak hero ke bagian hook (dulu 88px terlalu tinggi) */
body[data-grup="beranda"] .ak-utama { padding-top: 22px; }
body[data-grup="beranda"] .hook { margin-top: 0; }

/* Materi unggahan dosen yang disisipkan ke daftar pertemuan mata kuliah */
.tl-sampul-kosong {
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  color: var(--accent-dark); background: var(--pastel-blue); box-shadow: none;
}
.tl-sampul-kosong:hover { transform: none; box-shadow: 0 6px 18px rgba(28, 52, 80, 0.13); }
.tl-sampul-kosong svg { width: 34px; height: 34px; }
.tl-unggah .tl-no {
  color: var(--accent-dark); background: var(--pastel-blue);
  border-color: transparent; font-weight: 700; font-size: 20px;
}

/* Tab semester di halaman mata kuliah */
.sem-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 22px; }
.sem-tab {
  font: inherit; font-weight: 600; cursor: pointer; line-height: 1.2;
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--kartu); color: var(--ink-soft);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sem-tab:hover { border-color: var(--accent); color: var(--accent-dark); }
.sem-tab.aktif { background: var(--aksen-isi); color: #fff; border-color: transparent; }
.sem-panel[hidden] { display: none; }

/* Form unggah materi: baris dua kolom + teks bantu */
.materi-form-baris { display: flex; gap: 14px; }
.materi-form-baris > div { flex: 1; min-width: 0; }
.masuk-bantu { margin: 6px 0 2px; font-size: 12.5px; color: var(--ink-muted); }

/* Penanda "Baru" pada sampul materi yang baru diunggah */
.tl-sampul { position: relative; }
.tl-baru {
  position: absolute; top: 8px; left: 8px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  background: var(--aksen-isi); color: #fff;
  box-shadow: 0 2px 8px rgba(28, 52, 80, 0.25);
}

/* Statistik: tren kunjungan harian + tata dua kolom */
.stat-tren { display: flex; align-items: flex-end; gap: 6px; height: 140px; margin: 6px 0 4px; }
.stat-tren-kolom { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; min-width: 0; }
.stat-tren-bar { width: 70%; max-width: 34px; background: var(--aksen-isi); border-radius: 5px 5px 0 0; display: block; min-height: 2px; }
.stat-tren-tgl { font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.stat-catatan { font-size: 12.5px; color: var(--ink-muted); margin: 4px 0 0; }
.stat-kecil { color: var(--ink-muted); font-weight: 400; }
.admin-kolom2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .admin-kolom2 { grid-template-columns: 1fr; } }

/* Kemajuan belajar per pengunjung di halaman mata kuliah */
.materi-progres { margin: 12px 0 2px; }
.materi-progres[hidden] { display: none; }
.materi-progres-teks { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.materi-progres-rel { display: block; margin-top: 6px; height: 8px; border-radius: 999px; background: var(--pastel-blue); overflow: hidden; max-width: 420px; }
.materi-progres-isi { display: block; height: 100%; width: 0; background: var(--aksen-isi); border-radius: 999px; transition: width 0.25s ease; }
.tl-selesai-tanda {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  margin-left: 8px; padding: 7px 15px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  background: var(--aksen-isi); color: #fff;
}
.tl-selesai .tl-no { background: var(--aksen-isi); color: #fff; border-color: transparent; }

/* Kartu mata kuliah tambahan tanpa sampul */
.materi-sampul-kosong { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--pastel-blue); color: var(--accent-dark); }
.materi-sampul-kosong svg { width: 46px; height: 46px; }

/* Kelola mata kuliah di panel admin */
.admin-sub { color: var(--ink-muted); font-size: 14px; margin: 0 0 14px; }
.mk-tambah-baris { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.mk-tambah-baris .masuk-input { flex: 1; min-width: 220px; }
.mk-tambah-baris .masuk-tombol { width: auto; white-space: nowrap; }
.mk-daftar { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.mk-daftar li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--kartu); }
.mk-hapus { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: #b23; background: none; border: 1px solid #e5b7bf; border-radius: 999px; padding: 5px 12px; }
.mk-hapus:hover { background: #fbeaed; }


/* ------------------------------------------------------------------
   Kontras lencana dan label tipe. Teks putih di atas isian berwarna
   butuh isian yang cukup pekat; beberapa nada sebelumnya terlalu terang
   sehingga tulisannya sulit dibaca, terutama di mode gelap.
   ------------------------------------------------------------------ */
.k-q2 { background: #17806f; }
:root[data-theme="dark"] .k-q2 { background: #17806f; }
:root[data-theme="dark"] .k-sinta { background: #7c5cc4; }
.t-buku { color: #b81c2c; }
:root[data-theme="dark"] .t-buku { color: #ef8090; }
:root[data-theme="dark"] .k-q3 { background: #5a6b82; }

/* ------------------------------------------------------------------
   Token isian berwarna, dipisahkan dari token teks.

   --modul dan --accent-dark sengaja diterangkan di mode gelap supaya
   TEKS berwarna terbaca di latar gelap. Tapi elemen yang latarnya diisi
   warna itu lalu ditimpa teks putih ikut menjadi terang, dan tulisannya
   hilang. Karena itu perannya dipisah: --modul-isi dan --aksen-isi tetap
   pekat di kedua tema, khusus untuk latar yang di atasnya ada teks putih.
   Nilainya sengaja tidak punya versi gelap.
   ------------------------------------------------------------------ */
:root { --aksen-isi: #006569; }
body[data-grup="mengajar"],
body[data-grup="beranda"]         { --modul-isi: #006569; }
body[data-grup="bedah-publikasi"] { --modul-isi: #2c5580; }
body[data-grup="penelitian"]      { --modul-isi: #574083; }
body[data-grup="kolaborasi"]      { --modul-isi: #2b6446; }
body[data-grup="profil"]          { --modul-isi: #7a4a2a; }

/* Komponen baru yang latarnya berisi warna ikut token isian. */
.tl-baru, .sem-tab.aktif, .tl-selesai-tanda,
.tl-selesai .tl-no, .materi-progres-isi, .stat-tren-bar {
  background: var(--modul-isi, var(--aksen-isi));
}
.tl-baru, .sem-tab.aktif, .tl-selesai-tanda, .tl-selesai .tl-no { color: #fff; border-color: transparent; }
:root[data-theme="dark"] .sem-tab:not(.aktif) { background: var(--kartu); color: var(--ink-soft); border-color: var(--line); }
:root[data-theme="dark"] .tl-sampul-kosong,
:root[data-theme="dark"] .materi-sampul-kosong { background: var(--modul-tipis); color: var(--modul); }

/* Form ubah keterangan materi di panel admin, disembunyikan di balik <details> */
.materi-ubah { margin-top: 10px; }
.materi-ubah > summary {
  cursor: pointer; display: inline-block; font-size: 12.5px; font-weight: 600;
  color: var(--modul, var(--accent-dark)); padding: 4px 0; list-style: none;
}
.materi-ubah > summary::-webkit-details-marker { display: none; }
.materi-ubah > summary::before { content: "\270E\00A0"; }
.materi-ubah[open] > summary::before { content: "\2715\00A0"; }
.materi-ubah-form {
  margin-top: 10px; padding: 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg);
}
.materi-ubah-form .masuk-tombol { margin-top: 12px; width: auto; }