/* Cek Daya Tampung — direktori daya tampung & keketatan SNBP/SNBT.
   Mobile-first: dirancang untuk layar HP sempit dulu, baru diperlebar.
   Tema terang saja. Tanpa gerakan, tanpa transisi, halaman langsung terbuka
   saat tautan diklik seperti situs biasa.
   Warna dipilih agar nyaman dibaca lama: latar lembut, teks isi gelap
   dengan kontras kuat, tanpa warna mencolok. */
:root {
  color-scheme: light;
  --bg: #f8fafc;
  --card: #ffffff;
  --ink: #1e293b;
  --muted: #475569;
  --faint: #64748b;
  --line: #e2e8f0;
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --link: #1d4ed8;
  --link-hover: #1e40af;
  --soft: #eff6ff;
  --thead-ink: #334155;
  --warn-bg: #fffbeb;
  --warn-line: #fcd34d;
  --warn-ink: #92400e;
  --ok-bg: #f0fdf4;
  --ok-ink: #166534;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 14px rgba(15, 23, 42, 0.06);
  --radius: 14px;
  --maxw: 920px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
}
a { color: var(--link); }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, select:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
}
::selection { background: #dbeafe; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Header + navigasi yang selalu terlihat */
.site-header { border-bottom: 1px solid var(--line); background: var(--card); }
.header-inner { max-width: var(--maxw); margin: 0 auto; padding: 12px 16px 8px; }
.brand {
  font-size: 21px; font-weight: 800; color: var(--ink);
  text-decoration: none; letter-spacing: -0.02em; line-height: 1.25;
  display: inline-block; min-height: 44px; padding-top: 8px;
}
.brand span { color: var(--brand); }
.brand:hover { color: var(--ink); }
.site-nav { margin-top: 2px; }
.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 2px 4px;
}
.site-nav a {
  display: inline-block; padding: 10px 11px; min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
  border-radius: 10px; border-bottom: 3px solid transparent;
}
.site-nav a:hover { color: var(--brand-dark); background: var(--soft); }
.site-nav a[aria-current="page"] {
  color: var(--brand-dark); border-bottom-color: var(--brand); font-weight: 800;
}

/* Layout */
main { max-width: var(--maxw); margin: 0 auto; padding: 18px 16px 44px; }
main.narrow { max-width: 760px; }
h1 { font-size: 27px; line-height: 1.25; margin: 8px 0 8px; letter-spacing: -0.015em; }
h2 { font-size: 20px; line-height: 1.3; margin: 30px 0 8px; letter-spacing: -0.01em; }
h3 { font-size: 17px; margin: 20px 0 6px; }
p { margin: 8px 0; }
.lede { color: var(--muted); font-size: 17px; margin-top: 0; max-width: 62ch; }
.small { font-size: 14px; color: var(--muted); }
.prose { max-width: 68ch; }
.prose li { margin: 4px 0; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }

/* Breadcrumb: selalu menunjukkan posisi */
.breadcrumb { font-size: 13px; color: var(--muted); margin: 0 0 2px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center;
}
.breadcrumb li { min-height: 24px; }
.breadcrumb li + li::before { content: "›"; margin-right: 4px; color: var(--faint); }
.breadcrumb li:last-child { color: var(--ink); font-weight: 600; }

/* Strip statistik */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 18px 0 6px; }
@media (min-width: 560px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow);
  padding: 13px 14px; text-align: center;
}
.stat b { display: block; font-size: 24px; letter-spacing: -0.02em; color: var(--brand-dark); }
.stat span { font-size: 13px; color: var(--muted); }

/* Pencarian */
.searchbox {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow);
  padding: 16px; margin: 16px 0 8px;
}
.searchbox label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.searchbox input[type="search"], .searchbox input[type="text"], .searchbox select {
  width: 100%; min-height: 48px; padding: 11px 12px;
  font-size: 16px; border: 1.5px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink);
}
.searchbox input[type="search"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center;
  background-size: 20px 20px; padding-left: 40px;
}
.searchbox input:focus, .searchbox select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}
.search-hint { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.search-results { margin-top: 12px; }
.search-results .result-count { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.result-list a {
  display: block; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); padding: 11px 13px; text-decoration: none; color: var(--ink);
  min-height: 44px;
}
.result-list a:hover { border-color: var(--brand); }
.result-list .r-name { font-weight: 700; }
.result-list .r-meta { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.result-list .r-tag {
  display: inline-block; font-size: 12px; font-weight: 700; color: var(--brand-dark);
  background: var(--soft); border-radius: 999px; padding: 1px 9px; margin-left: 6px;
}
.result-empty {
  border: 1px dashed var(--line); border-radius: 12px;
  padding: 13px; font-size: 14px; color: var(--muted);
}

/* Kartu tautan untuk pintu masuk (bukan pengganti tabel) */
.link-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
@media (min-width: 560px) { .link-grid { grid-template-columns: 1fr 1fr; } }
.link-card {
  display: block; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; text-decoration: none; color: var(--ink);
  background: var(--card); box-shadow: var(--shadow); min-height: 44px;
}
.link-card:hover { border-color: var(--brand); }
.link-card b { display: block; font-size: 16px; }
.link-card span { font-size: 13px; color: var(--muted); }

/* Tabel data: tabel asli, kolom pertama membeku, gulir menyamping jelas */
.scroll-hint { font-size: 13px; color: var(--muted); margin: 10px 0 2px; }
.table-wrap { overflow-x: auto; margin: 6px 0 12px; -webkit-overflow-scrolling: touch; }
.table-wrap.tall { overflow: auto; max-height: 72vh; border: 1px solid var(--line); border-radius: 12px; }
table.dtable {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 15px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px;
}
.table-wrap.tall table.dtable { border: 0; border-radius: 0; }
.dtable th, .dtable td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.dtable thead th {
  background: var(--soft); color: var(--thead-ink);
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  position: sticky; top: 0; z-index: 2;
}
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable th:first-child, .dtable td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--card);
  min-width: 170px; max-width: 270px;
}
.dtable thead th:first-child { z-index: 3; background: var(--soft); }
.dtable td.num, .dtable th.num {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.dtable td .sub { display: block; font-size: 13px; color: var(--muted); font-weight: 400; }
.dtable .muted { color: var(--muted); }
.dtable .na { color: var(--muted); font-size: 14px; }
.dtable button.sortable {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-transform: inherit; letter-spacing: inherit; cursor: pointer;
  min-height: 44px; text-align: left; font-weight: 700;
}
.dtable caption {
  text-align: left; font-size: 13px; color: var(--muted);
  padding: 0 2px 8px; caption-side: top;
}
/* Keterangan tabel: selalu di luar wadah tabel, supaya membungkus penuh
   dalam lebar layar dan tidak pernah terpotong di tepi. */
.table-caption { font-size: 13px; color: var(--muted); margin: 10px 0 2px; }
.table-note { font-size: 13px; color: var(--muted); margin: 10px 0 2px; }
/* Baris kedua khusus HP: sembunyi di layar lebar, muncul di layar HP. */
.dtable td .only-narrow { display: none; }
/* Sel judul baris untuk tabel bertumpuk di halaman perbandingan. */
.dtable tbody th { text-align: left; font-weight: 700; background: #fbfdff; }

/* Lencana */
.badge {
  display: inline-block; font-size: 12px; font-weight: 700; line-height: 1.4;
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
  background: var(--soft); color: var(--brand-dark); border: 1px solid #bfdbfe;
}
.badge.new { background: var(--ok-bg); color: var(--ok-ink); border-color: #bbf7d0; }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }

/* Daftar fakta prodi/PTN */
.facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); padding: 14px 16px; margin: 14px 0; font-size: 14px;
}
@media (min-width: 560px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts div b { display: block; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.facts div span { font-weight: 600; }
.facts div { min-width: 0; overflow-wrap: anywhere; }

/* Angka besar */
.bignum {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0;
}
@media (min-width: 560px) { .bignum { grid-template-columns: repeat(3, 1fr); } }
.bignum .bn {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); padding: 12px 14px;
}
.bignum .bn b { display: block; font-size: 26px; line-height: 1.2; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.bignum .bn b.na-val { font-size: 16px; color: var(--muted); font-weight: 600; line-height: 1.5; }
.bignum .bn span { font-size: 13px; color: var(--muted); }

/* Kotak penjelasan di tempat */
.gloss {
  border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: 10px; background: var(--card);
  padding: 12px 14px; font-size: 14px; margin: 12px 0;
}
.gloss b { display: block; margin-bottom: 2px; }
.notice {
  border: 1px solid var(--warn-line); background: var(--warn-bg);
  border-radius: var(--radius); padding: 13px 15px; font-size: 14px; margin: 14px 0;
}
.notice b { color: var(--warn-ink); }
.source-note { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.disclaimer {
  font-size: 13px; color: var(--muted); border-top: 1px solid var(--line);
  margin-top: 26px; padding-top: 12px;
}

/* Grafik SVG */
.chart { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 12px; margin: 10px 0; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .chart-title { font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.chart .chart-legend { font-size: 12px; color: var(--muted); margin: 6px 0 0; }

/* Tombol */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 11px 18px; border-radius: 10px;
  border: 1.5px solid var(--brand); background: var(--brand); color: #fff;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-ghost {
  background: var(--card); color: var(--brand-dark); border: 1.5px solid var(--brand);
}
.btn-ghost:hover { background: var(--soft); color: var(--brand-dark); }
.btn-ghost[aria-pressed="true"] { background: var(--soft); }
.btn-block { width: 100%; }
.act-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.act-row .btn { flex: 1 1 200px; }

/* Filter keping */
.chiplist {
  list-style: none; margin: 10px 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.chiplist a, .chiplist button, .chiplist span.current {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 9px 15px; border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 14px;
  text-decoration: none; cursor: pointer;
}
.chiplist a:hover, .chiplist button:hover { border-color: var(--brand); color: var(--brand-dark); }
.chiplist span.current, .chiplist button[aria-pressed="true"] {
  background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700;
}
.filter-row { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 12px 0; }
@media (min-width: 560px) { .filter-row { grid-template-columns: 1fr 180px; } }
.filter-row input[type="search"], .filter-row select {
  width: 100%; min-height: 48px; padding: 11px 12px; font-size: 16px;
  border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
}

/* FAQ: jawaban muncul saat pertanyaan diklik */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  font-weight: 700; cursor: pointer; padding: 14px 30px 14px 0;
  position: relative; list-style: none; min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 13px; color: var(--muted); font-size: 20px; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 0 0 14px; }

/* Daftar tautan terkait */
.next-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.next-list a {
  display: block; padding: 11px 13px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  text-decoration: none; color: var(--ink);
}
.next-list a:hover { border-color: var(--brand); }
.next-list a .sub { display: block; font-size: 13px; color: var(--muted); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: #f1f5f9; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 22px 16px 30px; font-size: 14px; color: var(--muted); }
.footer-inner nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 10px; }
.footer-inner nav a { display: inline-block; min-height: 44px; padding: 10px 0; color: var(--muted); }
.footer-inner p { margin: 6px 0; }

/* Tombol yang tampil seperti tautan teks */
.linklike {
  background: none; border: 0; padding: 10px 4px; margin: 0;
  font: inherit; font-size: inherit; color: var(--link); cursor: pointer;
  text-decoration: underline; min-height: 44px;
}
.linklike:hover { color: var(--link-hover); }

/* Pesan kosong */
.empty-box {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 16px; font-size: 15px; color: var(--muted); margin: 12px 0;
}

/* Tabel perbandingan */
.compare-wrap { overflow-x: auto; margin: 10px 0; }
table.compare { border-collapse: collapse; width: 100%; font-size: 14px; background: var(--card); }
table.compare th, table.compare td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
table.compare thead th { background: var(--soft); }
table.compare td.num, table.compare th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.compare td.attr { font-weight: 700; background: #fbfdff; white-space: nowrap; }

/* Layar HP (640px ke bawah): semua tabel muat lebar layar.
   Kolom sekunder disembunyikan — isinya pindah ke baris kedua di sel
   pertama atau tetap tersedia di halaman detail. Judul kolom boleh
   membungkus, kolom pertama tidak lagi membeku, dan tidak ada tabel
   yang perlu digeser menyamping. Tata letak kolom dibuat tetap
   (fixed) supaya lebar tabel tidak pernah mengikuti isi terpanjang:
   kolom angka dan peringkat mendapat lebar pasti, kolom nama
   memakai sisanya. Layar yang lebih lebar tidak berubah. */
@media (max-width: 640px) {
  table.dtable { font-size: 14px; table-layout: fixed; }
  .dtable th, .dtable td { padding: 8px 6px; overflow-wrap: anywhere; }
  .dtable thead th { font-size: 11px; letter-spacing: 0; }
  .dtable th:first-child, .dtable td:first-child { left: auto; min-width: 0; max-width: none; }
  .dtable tbody td:first-child { position: static; }
  .dtable .hide-narrow { display: none; }
  .dtable td .only-narrow { display: block; }
  .dtable td.num, .dtable th.num { white-space: normal; }
  .dtable .badge { white-space: normal; }
  .dtable .btn { padding: 8px 12px; min-height: 44px; font-size: 14px; }
  .dtable button.sortable { width: 100%; white-space: normal; }
  /* Lebar kolom pasti per jenis tabel; kolom nama memakai sisanya. */
  .t-history th:nth-child(1) { width: 58px; }
  .t-history th:nth-child(2) { width: 74px; }
  .t-history th:nth-child(3) { width: 76px; }
  .t-jalur th:nth-child(3) { width: 76px; }
  .t-jalur th:nth-child(5) { width: 88px; }
  .t-hub th:nth-child(7), .t-hub th:nth-child(8) { width: 88px; }
  .t-ranked th:nth-child(1), .t-ranked th:nth-child(6) { width: 88px; }
  .t-ptn-index th:nth-child(3) { width: 104px; }
  .t-ptn-index th:nth-child(4) { width: 66px; }
  .t-prodi-index th:nth-child(2) { width: 66px; }
  .t-prodi-index th:nth-child(3) { width: 70px; }
  .t-prov-index th:nth-child(2), .t-prov-index th:nth-child(3) { width: 66px; }
  .t-prov-page th:nth-child(3) { width: 66px; }
  .t-origin th:nth-child(2) { width: 74px; }
  .t-fav th:nth-child(3) { width: 76px; }
  .t-fav th:nth-child(5) { width: 68px; }
  .t-fav .btn { padding: 8px 8px; font-size: 13px; white-space: nowrap; }
  .t-stack tbody th { width: 44%; }
  .t-cmp-history th:nth-child(1) { width: 58px; }
  .t-cmp-history th:nth-child(2) { width: 74px; }
  table.dtable.t-guide-jenjang { font-size: 13px; }
  .t-guide-jenjang th:nth-child(1) { width: 76px; }
  .t-guide-jenjang th:nth-child(2) { width: 64px; }
  .t-guide-jenjang th:nth-child(3) { width: 70px; }
  table.dtable.t-guide-snb { font-size: 13px; }
  .t-guide-snb th:nth-child(1) { width: 102px; }
  table.compare { font-size: 14px; }
  table.compare th, table.compare td { padding: 8px 6px; overflow-wrap: break-word; }
  table.compare td.attr { white-space: normal; }
  table.compare td.num, table.compare th.num { white-space: normal; }
}