/* ==========================================================================
   Analitica — halaman direktori formasi /tryout-cpns/formasi
   Blok tambahan di atas design system tum-*. Prefix: tcf- (Tryout Cpns Formasi).
   Dimuat setelah ugm-materi/main.css; tidak mengubah satu pun aturan tum-*.

   Semua angka di sini diwarisi dari komponen yang sudah ada, bukan dikarang:
   tabel mengikuti .tum-daya-table persis (th 600 12px #636366 di #F7F7F9,
   td border-bottom #F2F2F7, kolom angka rata kanan tabular-nums, wrapper
   radius 16 + border #E5E5EA + shadow level 1).
   ========================================================================== */

/* ---------------- 1b. Judul halaman data ----------------
   .tum-hero-title dirancang untuk judul pendek ("Prioritas Materi SKD
   Kedinasan 2026") dan memakai 36/52/64px. Judul di halaman formasi sengaja
   panjang karena memuat angkanya — pada 375px, 36px membuat judul jadi enam
   baris dan menghabiskan seluruh layar pertama. Skala di bawah ini menahan
   judul di tiga sampai empat baris tanpa kehilangan bobotnya. */

.tum-hero-title.tcf-title {
  font-size: 26px;
  line-height: 1.15;
}

@media (min-width: 768px) {
  .tum-hero-title.tcf-title {
    font-size: 38px;
    line-height: 1.12;
  }
}

/* Tanpa max-width: .tum-hero-title sudah memakai text-wrap: balance, yang
   membagi baris lebih rapi daripada memotong lebarnya secara sewenang-wenang.

   40px, bukan 46px: di >=1024px hero jadi dua kolom dan kolom teks menyempit ke
   572px untuk memberi ruang aset. Pada 46px judul hub pecah jadi tiga baris di
   lebar itu; pada 40px kembali dua baris. Aturan tablet (38px) dan mobile (26px)
   tidak ikut diubah karena hero-nya mode kolom, jadi kolom teksnya tidak
   menyempit. */

@media (min-width: 1024px) {
  .tum-hero-title.tcf-title {
    font-size: 40px;
    line-height: 1.1;
  }
}

/* ---------------- 1c. Hero dua kolom ----------------
   Meniru pola hero halaman ujian yang sudah tayang (mis. /tryout-cpns): teks di
   kiri, aset visual di kanan, menumpuk jadi satu kolom di layar sempit. Diukur
   dari produksi pada 1440px — kolom teks ~614px, kolom aset ~580px.

   Kartu statistik tidak ikut masuk kolom kiri: empat kartu di dalam ~614px
   membuat tiap kartu hanya ~140px dan angkanya jadi sempit. Kartu tetap
   selebar container, di bawah baris dua kolom ini. */

.tcf-hero-row {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

@media (min-width: 1024px) {
  .tcf-hero-row {
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }
}

.tcf-hero-teks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
}

/* Aset kartu lanskap, rasio 1,784. Angka di bawah hasil pengukuran, bukan
   perkiraan: porsi 45% lebar di desktop menyamai porsi visual hero produksi
   (580 dari 1242px), dan pada 500px tinggi asetnya 280px — sedikit lebih tinggi
   daripada blok teks hub, sehingga whitespace tegaknya tinggal ~8px.

   Rentang 440-493px sengaja dilewati: di situ H1 sudah pecah jadi tiga baris
   sementara asetnya belum cukup tinggi untuk mengimbangi, jadi hasilnya justru
   lebih timpang daripada 400px maupun 500px.

   Di mode kolom asetnya memakai lebar penuh content, sama seperti hero produksi
   yang memberi gambarnya 343px dari 343px content di 375px. */

.tcf-hero-aset {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.tcf-hero-aset img {
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .tcf-hero-aset img {
    max-width: 480px;
  }
}

@media (min-width: 1024px) {
  .tcf-hero-aset {
    flex: 0 0 500px;
    width: auto;
  }

  .tcf-hero-aset img {
    max-width: none;
  }
}

/* ---------------- 2. Baris angka utama ---------------- */

.tcf-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
  width: 100%;
}

@media (min-width: 768px) {
  .tcf-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 36px;
  }
}

.tcf-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #E5E5EA;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 1px rgba(0,0,0,0.06);
  text-align: left;
}

@media (min-width: 768px) {
  .tcf-stat {
    padding: 20px;
  }
}

.tcf-stat-num {
  font: 800 24px/1.1 'Inter', sans-serif;
  letter-spacing: -0.02em;
  color: #121212;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .tcf-stat-num {
    font-size: 30px;
  }
}

.tcf-stat-label {
  font: 500 12px/1.35 'Inter', sans-serif;
  color: #636366;
}

@media (min-width: 768px) {
  .tcf-stat-label {
    font-size: 13px;
  }
}

/* ---------------- 3. Baris provenans ----------------
   Dipakai di bawah angka utama dan di penutup halaman. Gaya mengikuti
   .tum-jadwal-foot: kecil, abu, tidak bersaing dengan konten. */

.tcf-prov {
  font: 400 12px/1.6 'Inter', sans-serif;
  color: #6E6E73;
  text-wrap: pretty;
}

/* Disclaimer di dalam .an-footer duduk tepat di atas garis .an-footbar */

.an-footer .tcf-prov {
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .tcf-prov {
    font-size: 13px;
  }
}

.tcf-prov a {
  color: #636366;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tcf-prov a:hover {
  color: #FF2D85;
}

/* ---------------- 4. Tabel generik ----------------
   Mewarisi .tum-daya-table. Bedanya: dipakai lebar penuh (bukan di dalam grid
   2 kolom), jadi butuh penanganan mobile sendiri. */

/* Dibatasi lebarnya di level anak, bukan dengan menyempitkan container section
   — semua section tetap memakai .tum-container yang sama supaya tepi kiri-kanan
   halaman tidak lompat-lompat saat di-scroll. Tanpa batas ini, pada 1440px
   tabel melar sampai 1120px dan jarak baca dari nama instansi ke angkanya jadi
   terlalu jauh. */

.tcf-table-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 900px;
}

.tcf-table-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #E5E5EA;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 1px rgba(0,0,0,0.06);
}

.tcf-table-wrap:focus-visible {
  outline: 2px solid #FF2D85;
  outline-offset: 2px;
}

.tcf-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 14px/1.45 'Inter', sans-serif;
  color: #121212;
}

/* Di bawah ~560px tabel 4 kolom mulai memampat; biarkan menggeser mendatar
   daripada memaksa teks jabatan terpotong jadi dua-tiga baris. */

.tcf-table {
  min-width: 560px;
}

.tcf-table th {
  text-align: left;
  background: #F7F7F9;
  color: #636366;
  font: 600 12px/1.3 'Inter', sans-serif;
  letter-spacing: 0.04em;
  padding: 14px 18px;
  border-bottom: 1px solid #E5E5EA;
  white-space: nowrap;
}

.tcf-table td {
  padding: 14px 18px;
  border-bottom: 1px solid #F2F2F7;
  vertical-align: top;
}

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

.tcf-table tbody tr:hover {
  background: #F7F7F9;
}

.tcf-table a {
  color: #121212;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: #C7C7CC;
}

.tcf-table a:hover {
  color: #FF2D85;
  text-decoration-color: currentColor;
}

.tcf-table a:focus-visible {
  outline: 2px solid #FF2D85;
  outline-offset: 2px;
  border-radius: 4px;
}

.tcf-col-no {
  width: 52px;
  font-variant-numeric: tabular-nums;
  color: #6E6E73;
}

.tcf-col-num {
  width: 120px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

th.tcf-col-num {
  text-align: right;
}

.tcf-col-wide {
  min-width: 220px;
}

.tcf-col-money {
  width: 190px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

th.tcf-col-money {
  text-align: right;
}

/* Baris yang ditonjolkan (mis. baris SMA di tabel jenjang). Ditandai dengan
   latar merah muda paling terang + garis kiri, bukan dengan warna teks —
   supaya tetap terbaca kalau baris juga berisi tautan. */

.tcf-row--hi td {
  background: #FFF0F6;
  box-shadow: inset 2px 0 0 #FF2D85;
}

.tcf-row--hi:hover td {
  background: #FFE8F1;
}

.tcf-row--hi td:first-child {
  color: #FF2D85;
  font-weight: 700;
}

.tcf-table-note {
  font: 400 12px/1.6 'Inter', sans-serif;
  color: #6E6E73;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .tcf-table-note {
    font-size: 13px;
  }
}

/* Petunjuk geser — hanya muncul selama tabel benar-benar bisa digeser. */

.tcf-scroll-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 'Inter', sans-serif;
  color: #6E6E73;
}

@media (min-width: 900px) {
  .tcf-scroll-hint {
    display: none;
  }
}

/* ---------------- 5. Pintu masuk (kartu navigasi) ---------------- */

.tcf-doors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .tcf-doors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (min-width: 1024px) {
  .tcf-doors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

.tcf-door {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #E5E5EA;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 1px rgba(0,0,0,0.06);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}

.tcf-door:hover {
  transform: translateY(-2px);
  border-color: #D1D1D6;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.08);
}

.tcf-door:focus-visible {
  outline: 2px solid #FF2D85;
  outline-offset: 2px;
}

/* Pintu utama (lulusan SMA) — pembeda halus lewat border, bukan warna blok,
   supaya aksen pink tetap satu per tampilan (tombol CTA). */

.tcf-door--utama {
  border-color: #FF2D85;
  box-shadow: 0 1px 2px rgba(255,45,133,0.10), 0 0 1px rgba(255,45,133,0.20);
}

.tcf-door--utama:hover {
  border-color: #FF2D85;
}

.tcf-door-eyebrow {
  font: 700 11px/1 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FF2D85;
}

.tcf-door-title {
  font: 700 17px/1.3 'Inter', sans-serif;
  color: #121212;
  letter-spacing: -0.005em;
}

.tcf-door-num {
  font: 800 22px/1.1 'Inter', sans-serif;
  color: #121212;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.tcf-door-desc {
  font: 400 13px/1.5 'Inter', sans-serif;
  color: #636366;
  text-wrap: pretty;
}

.tcf-door-more {
  margin-top: auto;
  padding-top: 12px;
  font: 700 13px/1 'Inter', sans-serif;
  color: #FF2D85;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tcf-door[aria-disabled="true"] {
  opacity: 1;
}

.tcf-door[aria-disabled="true"] .tcf-door-more {
  color: #6E6E73;
}

/* ---------------- 6. Bagian umum halaman ---------------- */

.tcf-section {
  padding: 48px 0;
  background: #ffffff;
}

@media (min-width: 768px) {
  .tcf-section {
    padding: 64px 0;
  }
}

.tcf-section--alt {
  background: #F8F9FB;
}

.tcf-section-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 768px) {
  .tcf-section-inner {
    gap: 24px;
  }
}

.tcf-section-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
}

.tcf-section-title {
  font: 800 22px/1.25 'Inter', sans-serif;
  letter-spacing: -0.015em;
  color: #121212;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .tcf-section-title {
    font-size: 28px;
    line-height: 1.2;
  }
}

@media (min-width: 1024px) {
  .tcf-section-title {
    font-size: 30px;
  }
}

/* Kalimat jawaban ringkas di bawah H2 — sengaja ditulis mandiri supaya bisa
   dikutip utuh oleh mesin jawaban tanpa perlu konteks kalimat sebelumnya. */

.tcf-answer {
  font: 400 15px/1.6 'Inter', sans-serif;
  color: #3A3A3C;
  max-width: 680px;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .tcf-answer {
    font-size: 16px;
  }
}

.tcf-answer strong {
  color: #121212;
  font-weight: 700;
}

/* ---------------- 7. FAQ (akordeon .an-faq) ----------------
   Terjemahan apa adanya dari .an-faq di src/css/utbk-snbt/main.css (@apply ->
   CSS biasa), supaya desainnya sama persis dengan landing lain. Perlu ditulis
   ulang di sini karena bundle yang dimuat halaman formasi (front-page +
   ugm-materi) tidak memuat satu pun aturan an-faq.

   Nilai dari tailwind.config.js: an-light #F8F9FB, an-dark #121212,
   breakpoint tablet 768px, xl 1280px (default Tailwind).
   ---------------------------------------------------------------------- */

.an-faq {
  background: #F8F9FB;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding: 60px 0;
}

.an-faq .an-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.an-faq .an-content-faq {
  width: 100%;
  max-width: none;
}

@media (min-width: 768px) {
  .an-faq .an-content-faq {
    max-width: 704px;
  }
}

@media (min-width: 1280px) {
  .an-faq .an-content-faq {
    max-width: 846px;
  }
}

/* padanan space-y-[30px] */

.an-faq .an-content-faq > * + * {
  margin-top: 30px;
}

.an-faq .an-title {
  font: 700 30px/38px 'Inter', sans-serif;
  letter-spacing: 0;
  text-align: center;
  color: #121212;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .an-faq .an-title {
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -0.02em;
  }
}

.an-faq .an-faq-items ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.an-faq .an-faq-items ul li {
  background: #ffffff;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 2px 8px 0 #00000014;
}

.an-faq .an-faq-title {
  display: flex;
  flex-direction: row;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.an-faq .an-faq-title h3 {
  font: 700 20px/32px 'Inter', sans-serif;
  letter-spacing: 0;
  color: #121212;
  text-wrap: balance;
}

.an-faq .an-faq-title i {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  transition: transform .15s cubic-bezier(.4, 0, .2, 1);
}

/* Tertutup pakai max-height:0 + overflow:hidden, bukan display:none, supaya
   isinya tetap terbaca crawler — sama seperti implementasi aslinya. */

.an-faq .an-faq-content {
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  transition: all .15s cubic-bezier(.4, 0, .2, 1);
}

.an-faq .an-faq-content p {
  font: 400 20px/32px 'Inter', sans-serif;
  letter-spacing: 0;
  color: #121212;
  text-wrap: pretty;
}

.an-faq .an-faq-content p strong {
  font-weight: 700;
}

/* preflight front-page menetapkan a{color:inherit}, jadi link perlu warna lagi */

.an-faq .an-faq-content p a {
  color: #FF2D85;
  font-weight: 600;
}

.an-faq .an-faq-items ul li.show .an-faq-title i {
  transform: rotate(180deg);
}

.an-faq .an-faq-items ul li.show .an-faq-content {
  margin-top: 16px;
  max-height: none;
}

/* ---------------- 8. Daftar tautan lanjutan ---------------- */

.tcf-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 640px) {
  .tcf-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .tcf-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tcf-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #E5E5EA;
  border-radius: 14px;
  font: 600 14px/1.35 'Inter', sans-serif;
  color: #121212;
  transition: border-color .15s, color .15s;
}

.tcf-link:hover {
  border-color: #FF2D85;
  color: #FF2D85;
}

.tcf-link:focus-visible {
  outline: 2px solid #FF2D85;
  outline-offset: 2px;
}

.tcf-link-num {
  flex: 0 0 auto;
  font: 500 12px/1 'Inter', sans-serif;
  color: #6E6E73;
  font-variant-numeric: tabular-nums;
}

.tcf-link:hover .tcf-link-num {
  color: #FF2D85;
}

/* ---------------- 9. Definisi / catatan kecil ---------------- */

.tcf-def {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tcf-def-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid #F2F2F7;
}

@media (min-width: 768px) {
  .tcf-def-row {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 16px;
    padding: 14px 0;
  }
}

.tcf-def-row:last-child {
  border-bottom: 0;
}

.tcf-def-term {
  font: 700 14px/1.45 'Inter', sans-serif;
  color: #121212;
}

.tcf-def-desc {
  font: 400 14px/1.6 'Inter', sans-serif;
  color: #3A3A3C;
  max-width: 680px;
  text-wrap: pretty;
}

/* ---------------- 10. Aksesibilitas ---------------- */

.tcf-skip {
  position: absolute;
  left: -9999px;
  background: #121212;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 10px;
  font: 600 14px/1 'Inter', sans-serif;
  z-index: 100;
}

.tcf-skip:focus {
  left: 16px;
  top: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .tcf-door, .tcf-link {
    transition: none;
  }

  .tcf-door:hover {
    transform: none;
  }
}