/* SMK Darul Mukminin — kartu jurusan yang bisa diklik + Halaman Detail Jurusan (3.95.0).
   Dimuat tepat sebelum navy.css di beranda, akademik, dan halaman jurusan. Memakai token yang sudah ada
   (--tinta, --biru, --khas, --garis, --kertas, ...); tidak mengubah komponen lama. */

/* ---------- Kartu jurusan di Beranda dan Akademik: seluruh kartu membawa ke halaman detail ---------- */
.jur-bertaut { position: relative; cursor: pointer; }
.jur-tautan {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px;
  font-size: 0.875rem; font-weight: 600; color: var(--biru-tua, #0f2d57); text-decoration: none;
}
.jur-tautan .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.jur-tautan::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.jur-bertaut:hover .jur-tautan .icon { transform: translateX(4px); }
.jur-bertaut:hover .jur-tautan { text-decoration: underline; text-underline-offset: 3px; }
.jur-tautan:focus-visible { outline: none; }
.jur-tautan:focus-visible::after { outline: 3px solid var(--biru-muda, #4a7bbd); outline-offset: 2px; }

/* ---------- Halaman Detail Jurusan ---------- */
.jd-hero-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .jd-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; } }
.jd-singkat {
  display: inline-block; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em;
  background: var(--biru-soft, #e8eff9); color: var(--biru-tua, #0f2d57); border: 1px solid rgba(15, 45, 87, 0.14);
}
.jd-hero .lede { max-width: 38rem; }
.jd-aksi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.jd-catatan { margin: 12px 0 0; font-size: 0.8125rem; color: var(--teks-redup, #4a5b74); }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .jd-catatan { display: none; } }

.jd-media { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--biru-soft, #e8eff9); border: 1px solid rgba(15, 45, 87, 0.12); box-shadow: var(--bu-bayang, 0 14px 30px -18px rgba(15, 45, 87, .3)); }
.jd-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jd-media.tanpa-foto { display: grid; place-items: center; background: linear-gradient(135deg, var(--biru-soft, #e8eff9), #fff); }
.jd-media-singkat { font-family: "Literata", Georgia, serif; font-weight: 700; font-size: clamp(3rem, 9vw, 6rem); letter-spacing: 0.04em; color: var(--biru, #1d4a86); }

.jd-sempit { max-width: 46rem; }
.jd-teks p, p.jd-teks { font-size: 1.0625rem; line-height: 1.75; color: var(--teks, #13233d); }
.jd-teks p + p { margin-top: 1em; }

.jd-komp { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: komp; }
@media (min-width: 720px) { .jd-komp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .jd-komp { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jd-komp-item {
  counter-increment: komp; display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px 20px;
  background: var(--kartu, #fcfdff); border: var(--bu-garis, 1px solid rgba(15, 45, 87, .13)); border-radius: 14px; box-shadow: var(--bu-bayang, none);
}
.jd-komp-item::before {
  content: counter(komp, decimal-leading-zero); flex: none; font-family: "Literata", Georgia, serif; font-weight: 700;
  font-size: 1.25rem; line-height: 1.2; color: var(--khas-tua, #8a6a1f);
}
.jd-komp-teks { font-weight: 500; line-height: 1.5; color: var(--biru-tua, #0f2d57); overflow-wrap: anywhere; }

.jd-chip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.jd-chip li { padding: 9px 16px; border-radius: 999px; background: var(--biru-soft, #e8eff9); color: var(--biru-tua, #0f2d57); font-weight: 600; font-size: 0.9375rem; border: 1px solid rgba(15, 45, 87, 0.12); }

.jd-ajak-kartu {
  display: grid; gap: 22px; align-items: center; padding: 32px 28px; border-radius: 20px;
  background: var(--tinta, #0c2447); color: #fff; box-shadow: var(--bu-bayang-naik, 0 24px 40px -20px rgba(15, 45, 87, .4));
  border-top: 3px solid var(--khas, #c9a24d);
}
@media (min-width: 860px) { .jd-ajak-kartu { grid-template-columns: minmax(0, 1fr) auto; padding: 44px 48px; gap: 40px; } }
.jd-ajak-label { margin: 0 0 8px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--khas-terang, #e6c77d); }
.jd-ajak-kartu h2 { color: #fff; max-width: 32rem; }
.jd-ajak-kartu p { color: rgba(255, 255, 255, 0.82); max-width: 34rem; }
.jd-ajak-aksi { display: grid; gap: 10px; justify-items: start; }
@media (min-width: 860px) { .jd-ajak-aksi { justify-items: center; text-align: center; } }
.jd-ajak-kartu .jd-catatan { color: rgba(255, 255, 255, 0.7); margin: 0; }

.jd-lain { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.jd-lain-kartu {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; text-decoration: none;
  background: var(--kartu, #fcfdff); border: var(--bu-garis, 1px solid rgba(15, 45, 87, .13)); color: var(--biru-tua, #0f2d57);
  transition: transform .25s ease, border-color .25s ease;
}
.jd-lain-kartu:hover { transform: translateY(-2px); border-color: rgba(30, 77, 123, 0.4); }
.jd-lain-singkat { flex: none; padding: 3px 9px; border-radius: 8px; background: var(--biru, #1d4a86); color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; }
.jd-lain-nama { font-weight: 600; line-height: 1.35; }

@media (prefers-reduced-motion: reduce) { .jd-lain-kartu, .jur-tautan .icon { transition: none; } .jd-lain-kartu:hover { transform: none; } }