/* =====================================================================================================
   Situs UOS — PT. Unggulan Operator Sinergis · dibangun SITUNEO Digital Solusi Indonesia (Okt 2026)
   Palet dari logo UOS: hijau giok (utama) + merah Tiongkok (aksen hemat) di atas kertas hangat.
   Huruf: Figtree (judul, angka, merek) + Inter (isi, menu, tombol) — statis, dimuat lokal. Mobile dulu.
   (Diganti 4 Okt 2026 malam: Young Serif + Onest dinilai Rifal tidak nyaman dibaca.)
   ===================================================================================================== */
@font-face { font-family: 'Figtree'; src: url('../font/Figtree-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../font/Figtree-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../font/Inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../font/Inter-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../font/Inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../font/Inter-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
/* huruf cadangan bermetrik sama (CLS saat huruf asli terlambat di 4G lambat — uji 9 Okt 2026: galeri 0,18): size-adjust dari lebar rata-rata vs Arial,
   ascent/descent dari hhea huruf aslinya (Inter 96,9/24,1 · Figtree 95/25) */
@font-face { font-family: 'Inter Cadangan'; src: local('Arial'); font-weight: 400 500; size-adjust: 107%; ascent-override: 96.9%; descent-override: 24.1%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Cadangan'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 700; size-adjust: 101%; ascent-override: 96.9%; descent-override: 24.1%; line-gap-override: 0%; }
@font-face { font-family: 'Figtree Cadangan'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 700 800; size-adjust: 96%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }

:root {
  --tinta: #10201A; --tinta-2: #2E3C36; --tinta-3: #56645D;
  --kertas: #F6F4EE; --kertas-2: #EFECE3; --putih: #FFFFFF;
  --garis: #E3E0D6; --garis-2: #CDCAC0;
  --giok-900: #072E23; --giok-800: #0E4D3A; --giok-700: #135F47; --giok-600: #187654; --giok-500: #2E8F68;
  --giok-100: #DDEFE4; --giok-50: #EEF6F0;
  --daun: #7BBA6A; --daun-terang: #A6D69A;
  --merah: #C2352B; --merah-100: #FBE8E5;
  --wa: #1FAF59;
  --judul: 'Figtree', 'Figtree Cadangan', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --sans: 'Inter', 'Inter Cadangan', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --r1: 6px; --r2: 10px; --r3: 16px; --r4: 22px;
  --bayang: 0 1px 2px rgba(16, 32, 26, .05), 0 14px 34px -18px rgba(16, 32, 26, .28);
  --bayang-besar: 0 2px 4px rgba(7, 46, 35, .06), 0 30px 60px -30px rgba(7, 46, 35, .45);
  --lebar: 1200px; --tepi: clamp(16px, 4.5vw, 40px);
  --tinggi-kepala: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--tinggi-kepala) + 16px); }
body { margin: 0; background: var(--kertas); color: var(--tinta); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.72;
       text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--giok-700); text-underline-offset: 3px; }
a:hover { color: var(--giok-800); }
h1, h2, h3, h4 { margin: 0; color: var(--tinta); }
h1, h2, h3 { font-family: var(--judul); text-wrap: balance; }
h1, h2 { font-weight: 800; letter-spacing: -.018em; }
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.2rem); line-height: 1.14; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.35vw, 2.15rem); line-height: 1.22; }
h3 { font-size: 1.12rem; font-weight: 700; line-height: 1.38; letter-spacing: -.01em; }
h1 em, h2 em { font-style: normal; color: var(--giok-600); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
address { font-style: normal; }
button { font: inherit; }
.ikon { width: 1.1em; height: 1.1em; flex-shrink: 0; fill: currentColor; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lompat { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--giok-800); color: #fff; padding: 10px 16px; border-radius: var(--r1); font-weight: 600; }
.lompat:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--merah); outline-offset: 2px; border-radius: 4px; }

.wadah { width: 100%; max-width: calc(var(--lebar) + 2 * var(--tepi)); margin-inline: auto; padding-inline: var(--tepi); }
.wadah-sedang { max-width: calc(860px + 2 * var(--tepi)); }
.wadah-sempit { max-width: calc(780px + 2 * var(--tepi)); }
.wadah-baca { max-width: calc(720px + 2 * var(--tepi)); }
.tengah { text-align: center; margin-top: 28px; }
.tengah-teks { text-align: center; margin-inline: auto; }
.teks-besar { font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); color: var(--tinta-2); line-height: 1.7; }
.teks-redup { color: var(--tinta-3); }
.teks-kecil { font-size: .97rem; color: var(--tinta-3); margin-top: 14px; max-width: 64ch; }
.judul-kecil { font-family: var(--judul); font-size: 1.05rem; font-weight: 700; margin-bottom: 14px; }

/* ── Label alis: kotak merah kecil seperti cap ─────────────────────────────── */
.alis { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: .78rem; font-weight: 700; letter-spacing: .15em;
        text-transform: uppercase; color: var(--giok-700); }
.alis::before { content: ''; width: 9px; height: 9px; background: var(--merah); border-radius: 2px; transform: rotate(45deg); }
.bagian-hijau .alis, .alis-terang { color: var(--daun-terang); }

/* ── Tombol ───────────────────────────────────────────────────────────────── */
.tombol { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 10px 20px; border-radius: 999px;
          border: 1.5px solid transparent; font-family: var(--sans); font-weight: 600; font-size: .98rem; line-height: 1.2; text-decoration: none;
          cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.tombol:hover { transform: translateY(-1px); }
.tombol .ikon { width: 18px; height: 18px; }
.tombol-kecil { min-height: 40px; padding: 8px 16px; font-size: .92rem; }
.tombol-besar { min-height: 54px; padding: 13px 26px; font-size: 1.02rem; }
.tombol-penuh { width: 100%; }
.tombol-utama { background: var(--giok-600); color: #fff; box-shadow: 0 10px 22px -12px rgba(24, 118, 84, .75); }
.tombol-utama:hover { background: var(--giok-700); color: #fff; }
.tombol-garis { background: transparent; color: var(--giok-800); border-color: var(--garis-2); }
.tombol-garis:hover { border-color: var(--giok-600); color: var(--giok-700); background: var(--putih); }
.tombol-terang { background: #fff; color: var(--giok-800); }
.tombol-terang:hover { background: var(--giok-50); color: var(--giok-900); }
.tombol-garis-terang { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .38); }
.tombol-garis-terang:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .07); }
.tautan-panah { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--giok-700); text-decoration: none;
                border-bottom: 1.5px solid var(--merah); padding-bottom: 2px; }
.tautan-panah .ikon { transition: transform .18s ease; }
.tautan-panah:hover .ikon { transform: translateX(3px); }

/* ── Pita pratinjau (hanya mode pratinjau) ───────────────────────────────── */
.pita-pratinjau { background: #FFF4D6; color: #6B4E00; font-size: .82rem; text-align: center; padding: 7px 16px; border-bottom: 1px solid #F1DC9F; }
.pita-pratinjau a { color: inherit; font-weight: 600; }

/* ── Kepala & menu ────────────────────────────────────────────────────────── */
/* Latar buram di lapisan ::before — backdrop-filter pada .kepala sendiri membuat panel menu HP (position: fixed) ikut
   "terkurung" di dalam kepala dan tampil menumpuk isi halaman (temuan Rifal di HP, 4 Okt 2026). */
.kepala { position: sticky; top: 0; z-index: 50; isolation: isolate;
          border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; }
.kepala::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(246, 244, 238, .94);
                  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.kepala.tergulir { border-bottom-color: var(--garis); box-shadow: 0 8px 24px -20px rgba(16, 32, 26, .5); }
.kepala-isi { display: flex; align-items: center; gap: 16px; min-height: var(--tinggi-kepala); }
.merek { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--tinta); margin-right: auto; }
.merek img { width: 44px; height: 44px; border-radius: 50%; }
.merek-teks { display: flex; flex-direction: column; line-height: 1.1; }
.merek-teks b { font-family: var(--judul); font-weight: 800; font-size: 1.36rem; letter-spacing: .02em; }
.merek-teks small { font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); font-weight: 600; margin-top: 2px; }
.merek-terang, .merek-terang:hover { color: #fff; }
.merek-terang small { color: rgba(255, 255, 255, .62); }
.kepala-aksi { display: flex; align-items: center; gap: 8px; white-space: nowrap; position: relative; z-index: 2; }   /* tombol Menu selalu di atas panel menu */
.tombol-ikon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; text-decoration: none; }
.tombol-wa-kecil { background: var(--giok-50); color: var(--wa); border: 1px solid var(--giok-100); }
.tombol-wa-kecil:hover { background: var(--wa); color: #fff; }
.tombol-wa-kecil .ikon { width: 20px; height: 20px; }
.tombol-menu { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--garis-2);
               background: var(--putih); color: var(--tinta); font-weight: 600; font-size: .92rem; cursor: pointer; }
.tombol-menu .ikon { width: 20px; height: 20px; }
.tombol-menu .ikon-tutup { display: none; }
.kepala.buka .tombol-menu .ikon-tutup { display: block; }
.kepala.buka .tombol-menu .ikon-buka { display: none; }
.sembunyi-hp { display: none; }
@media (max-width: 339px) { .kepala .merek-teks small { display: none; } }   /* < 340 px (HP 320 px): nama PT tidak muat — cukup logo + UOS EduCon (cek 9 Okt sore) */

/* menu HP: panel di bawah kepala */
/* posisi absolut di bawah kepala (kepala sticky = acuan): tanpa variabel dari JS — WebKit menolak tulisan gaya inline di bawah CSP (8 Okt 2026) */
.nav { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - var(--tinggi-kepala)); height: calc(100dvh - var(--tinggi-kepala));
       z-index: 1; background: var(--kertas); padding: 10px var(--tepi) 72px; overflow-y: auto;
       transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.kepala.buka .nav { transform: none; opacity: 1; visibility: visible; transition: opacity .18s ease, transform .18s ease; }
.nav-daftar > li { border-bottom: 1px solid var(--garis); }
.nav-daftar > li > a, .nav-induk > a { display: block; padding: 15px 2px; font-size: 1.12rem; font-weight: 600; color: var(--tinta); text-decoration: none; }
.nav-daftar a[aria-current="page"] { color: var(--giok-600); }
.nav-induk { display: flex; align-items: center; justify-content: space-between; }
.nav-buka { display: none; }
.nav-sub { padding: 0 0 12px; display: grid; gap: 4px; }
.nav-sub a { display: block; padding: 9px 12px; border-radius: var(--r2); text-decoration: none; color: var(--tinta); }
.nav-sub a b { display: block; font-weight: 600; font-size: .98rem; }
.nav-sub a span { display: block; font-size: .84rem; color: var(--tinta-3); }
.nav-sub a:hover, .nav-sub a[aria-current="page"] { background: var(--giok-50); }
.nav-cta-hp { width: 100%; margin-top: 22px; }
body.kunci-gulir { overflow: hidden; }

@media (min-width: 560px) {
  .sembunyi-hp { display: inline-flex; }
}
@media (min-width: 1240px) {   /* di bawah 1240px menu memakai tombol "Menu" — menu lengkap tidak muat satu baris */
  .tombol-menu, .nav-cta-hp { display: none; }
  .kepala-isi { gap: 22px; }
  .merek-teks small { white-space: nowrap; }
  .merek { margin-right: 0; }
  .nav { position: static; inset: auto; height: auto; background: none; padding: 0; overflow: visible; transform: none; opacity: 1; visibility: visible;
         margin-right: auto; transition: none; }
  .nav-daftar { display: flex; align-items: center; gap: 2px; }
  .nav-daftar > li { border: 0; position: relative; }
  .nav-daftar > li > a, .nav-induk > a { padding: 10px 11px; font-size: .94rem; font-weight: 500; border-radius: 999px; color: var(--tinta-2); white-space: nowrap; }
  .nav-daftar > li > a:hover, .nav-induk > a:hover { color: var(--tinta); background: rgba(16, 32, 26, .05); }
  .nav-daftar a[aria-current="page"] { color: var(--giok-700); font-weight: 600; }
  .nav-induk > a { padding-right: 4px; }
  .nav-buka { display: inline-grid; place-items: center; width: 26px; height: 30px; border: 0; background: none; color: var(--tinta-3); cursor: pointer; border-radius: 6px; }
  .nav-buka .ikon { width: 14px; height: 14px; transition: transform .18s ease; }
  .nav-buka[aria-expanded="true"] .ikon { transform: rotate(180deg); }
  .nav-sub { position: absolute; top: calc(100% + 8px); left: -8px; width: 340px; padding: 10px; background: var(--putih); border: 1px solid var(--garis);
             border-radius: var(--r3); box-shadow: var(--bayang-besar); opacity: 0; visibility: hidden; transform: translateY(6px);
             transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
  .punya-anak:hover .nav-sub, .punya-anak:focus-within .nav-sub, .punya-anak.buka .nav-sub { opacity: 1; visibility: visible; transform: none;
             transition: opacity .16s ease, transform .16s ease; }
  .punya-anak::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
}

/* ── Bagian umum ──────────────────────────────────────────────────────────── */
.bagian { padding-block: clamp(56px, 7.5vw, 100px); }
.bagian-rapat { padding-block: clamp(36px, 5vw, 64px); }
.bagian-putih { background: var(--putih); border-block: 1px solid var(--garis); }
.bagian-hijau { background: radial-gradient(1000px 500px at 85% -10%, rgba(123, 186, 106, .18), transparent 60%), var(--giok-900); color: #E3EEE7; }
.bagian-hijau h2, .bagian-hijau h3 { color: #fff; }
.bagian-hijau h2 em { color: var(--daun-terang); }
.bagian-hijau p { color: #C3D6CB; }
.judul-bagian { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.judul-bagian > p:not(.alis) { margin-top: 14px; color: var(--tinta-2); font-size: 1.08rem; max-width: 64ch; }
.bagian-hijau .judul-bagian > p:not(.alis) { color: #C3D6CB; }
.judul-bagian-baris { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.judul-bagian-baris h2 { max-width: 760px; }
.dua-kolom { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
.dua-kolom-rata { align-items: start; }
@media (min-width: 920px) {
  .dua-kolom { grid-template-columns: 1fr 1fr; }
  .dua-kolom-gambar { grid-template-columns: .95fr 1.05fr; }
}
.grid-tiga, .grid-empat { display: grid; gap: 16px; }
@media (min-width: 720px) { .grid-tiga { grid-template-columns: repeat(3, 1fr); } .grid-empat { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-empat { grid-template-columns: repeat(4, 1fr); } }
.kartu-ikon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--giok-50); color: var(--giok-600);
              border: 1px solid var(--giok-100); }
.kartu-ikon .ikon { width: 22px; height: 22px; }
.lencana { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 1em; font-size: .8rem; font-weight: 600;
           background: var(--kertas-2); color: var(--tinta-2); line-height: 1.3; }
.lencana .ikon { width: 14px; height: 14px; }
.lencana-hijau { background: var(--giok-50); color: var(--giok-700); }
.lencana-merah { background: var(--merah-100); color: #8E241D; }
.lencana-baris { display: flex; flex-wrap: wrap; gap: 6px; }
.tabel .lencana { white-space: nowrap; }   /* tabel HP: pil terlipat 4 baris jadi lonjong (tangkapan Rifal 9 Okt) */
@media (max-width: 639px) {   /* tabel ringkasan kampus di HP = kartu per kampus, tanpa geser ke samping (9 Okt sore) */
  .tabel.tabel-ringkas, .tabel.tabel-ringkas tbody, .tabel.tabel-ringkas th, .tabel.tabel-ringkas td { display: block; }
  .tabel.tabel-ringkas { min-width: 0; }
  .tabel.tabel-ringkas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabel.tabel-ringkas tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px 16px; border-bottom: 1px solid var(--garis); }
  .tabel.tabel-ringkas tbody tr:last-child { border-bottom: 0; }
  .tabel.tabel-ringkas tbody th { width: 100%; padding: 0 0 2px; border: 0; font-size: 1rem; line-height: 1.4; }
  .tabel.tabel-ringkas td { padding: 0; border: 0; color: var(--tinta-2); font-size: .92rem; }
  .tabel.tabel-ringkas td:nth-of-type(1)::after { content: " ·"; color: var(--tinta-3); }
  .tabel.tabel-ringkas td.angka-sel::after { content: " jurusan"; font-weight: 400; }
}

/* ── Kepala halaman dalam ─────────────────────────────────────────────────── */
.judul-halaman { padding-block: clamp(36px, 5.5vw, 72px) clamp(28px, 4vw, 48px); }
.remah { display: flex; flex-wrap: wrap; gap: 6px; font-size: .86rem; color: var(--tinta-3); margin-bottom: 22px; }
.remah a { color: var(--tinta-3); text-decoration: none; }
.remah a:hover { color: var(--giok-700); text-decoration: underline; }
.remah [aria-current] { color: var(--tinta-2); }
.judul-halaman h1 { max-width: 920px; }
.judul-halaman .pembuka { margin-top: 18px; max-width: 64ch; font-size: clamp(1.06rem, 1rem + .35vw, 1.22rem); color: var(--tinta-2); line-height: 1.7; }
.judul-aksi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.judul-aksi.tengah { justify-content: center; }

/* ── Hero beranda ─────────────────────────────────────────────────────────── */
.hero { position: relative; padding-block: clamp(32px, 5vw, 72px) clamp(44px, 6vw, 88px); overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
                background: radial-gradient(700px 420px at 92% 18%, rgba(123, 186, 106, .22), transparent 65%),
                            radial-gradient(520px 320px at 8% 100%, rgba(194, 53, 43, .06), transparent 70%); }
.hero-isi { position: relative; display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
.hero-teks .pembuka { margin-top: 20px; max-width: 58ch; font-size: clamp(1.06rem, 1rem + .35vw, 1.2rem); color: var(--tinta-2); line-height: 1.7; }
.hero-aksi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero-yakin { margin-top: 26px; display: grid; gap: 9px; }
.hero-yakin li { display: flex; gap: 10px; align-items: flex-start; font-size: 1rem; color: var(--tinta-2); }
.hero-yakin .ikon { color: var(--giok-600); margin-top: 3px; }
@media (min-width: 1000px) { .hero-isi { grid-template-columns: 1.08fr .92fr; } }

/* Kartu "tiket" jalur 3 tahun */
.tiket { position: relative; background: var(--putih); color: var(--tinta); border: 1px solid var(--garis); border-radius: var(--r4); box-shadow: var(--bayang-besar); overflow: hidden; }   /* color: di dalam .bagian-hijau teks mewarisi warna terang */
.tiket-kepala { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px 18px; background: var(--giok-800); color: #fff; }
.tiket-label { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--daun-terang); }
.tiket-rute { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-family: var(--judul); font-weight: 700; font-size: clamp(1.02rem, .95rem + .45vw, 1.24rem); }
.tiket-pesawat { width: 16px; height: 16px; color: var(--daun-terang); transform: rotate(45deg); }
.tiket-pesawat.balik { transform: rotate(135deg); }
.tiket-cap { width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); transform: rotate(-8deg); flex-shrink: 0; }
.tiket-kepala + .rute { border-top: 2px dashed var(--garis-2); }
.rute { position: relative; padding: 22px 22px 14px 56px; }
.rute::before { content: ''; position: absolute; left: 33px; top: 34px; bottom: 34px; width: 3px; border-radius: 2px;
                background: linear-gradient(var(--merah), var(--giok-600) 18%, var(--giok-600) 82%, var(--merah)); }
.rute-titik { position: relative; padding-bottom: 16px; }
.rute-titik::before { content: ''; position: absolute; left: -30px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--putih);
                      border: 3px solid var(--giok-600); }
.rute-ujung::before { background: var(--merah); border-color: var(--merah); box-shadow: 0 0 0 4px var(--merah-100); }
.rute-tempat { display: block; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--tinta-3); }
.rute-titik b { display: block; font-size: 1.02rem; font-weight: 600; margin-top: 1px; }
.rute-isi { display: block; font-size: .88rem; color: var(--tinta-2); line-height: 1.5; margin-top: 2px; }

/* Pita angka */
.pita-angka { background: var(--putih); border-block: 1px solid var(--garis); }
.pita-angka-isi { display: grid; grid-template-columns: 1fr 1fr; }
.angka { padding: 22px 16px 22px 0; border-bottom: 1px solid var(--garis); }
.angka:nth-child(odd) { border-right: 1px solid var(--garis); }
.angka:nth-child(even) { padding-left: 18px; }
.angka:nth-last-child(-n+2) { border-bottom: 0; }
.angka b { display: block; font-family: var(--judul); font-weight: 800; font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem); line-height: 1; color: var(--giok-700);
           font-variant-numeric: lining-nums; }
.angka span { display: block; margin-top: 8px; font-size: .88rem; color: var(--tinta-2); line-height: 1.45; max-width: 26ch; }
@media (min-width: 900px) {
  .pita-angka-isi { grid-template-columns: repeat(4, 1fr); }
  .angka, .angka:nth-child(even) { border-bottom: 0; padding: 30px 24px; border-right: 1px solid var(--garis); }
  .angka:first-child { padding-left: 0; }
  .angka:last-child { border-right: 0; }
}

/* Untuk siapa */
.foto-bingkai { position: relative; border-radius: var(--r4); overflow: hidden; box-shadow: var(--bayang); background: var(--kertas-2); }
.foto-bingkai img { width: 100%; height: 100%; object-fit: cover; }
.daftar-siapa { margin-top: 26px; display: grid; gap: 18px; }
.daftar-siapa li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.daftar-siapa .ikon { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--giok-50); color: var(--giok-600); }
.daftar-siapa b { display: block; font-weight: 600; }
.daftar-siapa span { display: block; color: var(--tinta-2); font-size: 1rem; margin-top: 2px; }

/* Program */
.grid-program { display: grid; gap: 14px; }
@media (min-width: 700px) { .grid-program { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid-program { grid-template-columns: repeat(3, 1fr); } }
.kartu-program { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 22px; background: var(--kertas); border: 1px solid var(--garis);
                 border-radius: var(--r3); text-decoration: none; color: var(--tinta); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.kartu-program:hover { border-color: var(--giok-500); transform: translateY(-3px); box-shadow: var(--bayang); color: var(--tinta); }
.kartu-program h3 { margin-top: 6px; font-size: 1.16rem; }
.kartu-program p { color: var(--tinta-2); font-size: 1rem; }
.kartu-untuk { margin-top: auto; padding-top: 8px; font-size: .82rem; font-weight: 600; color: var(--giok-700); }
.kartu-panah { position: absolute; top: 22px; right: 22px; color: var(--tinta-3); transition: transform .18s ease, color .18s ease; }
.kartu-program:hover .kartu-panah { transform: translateX(3px); color: var(--merah); }

/* Kampus ringkas */
.daftar-kampus-ringkas { display: grid; gap: 10px; }
.daftar-kampus-ringkas li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 16px 18px;
                            background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r2); }
.daftar-kampus-ringkas b { display: block; font-weight: 600; }
.daftar-kampus-ringkas span { font-size: .88rem; color: var(--tinta-3); }
.daftar-kampus-ringkas .lencana { font-size: .78rem; }
@media (min-width: 900px) { .daftar-kampus-ringkas { grid-template-columns: 1fr 1fr; } }
.catatan-biaya { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 16px 18px; border-radius: var(--r2); background: var(--giok-50);
                 border: 1px solid var(--giok-100); color: var(--tinta-2); font-size: 1rem; }
.catatan-biaya .ikon { color: var(--giok-600); margin-top: 3px; }

/* Alasan (latar hijau) */
.grid-alasan { display: grid; gap: 14px; }
@media (min-width: 700px) { .grid-alasan { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid-alasan { grid-template-columns: repeat(4, 1fr); } }
.alasan { padding: 24px; border-radius: var(--r3); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.alasan .ikon { width: 30px; height: 30px; color: var(--daun-terang); }
.alasan h3 { margin-top: 16px; }
.alasan p { margin-top: 8px; font-size: 1rem; }

/* Testimoni */
.grid-testi { display: grid; gap: 16px; }
@media (min-width: 860px) { .grid-testi { grid-template-columns: repeat(2, 1fr); } }
.testi { display: flex; flex-direction: column; gap: 14px; padding: 26px; background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r3); }
.bagian-putih .testi { background: var(--kertas); }
.testi-kutip { width: 30px; height: 30px; color: var(--giok-500); }
.testi blockquote { margin: 0; font-size: 1.02rem; line-height: 1.7; color: var(--tinta); }
.testi-terjemah { font-size: 1rem; color: var(--tinta-3); }
.testi figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; }
.testi-foto { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.testi figcaption b { display: block; font-weight: 600; }
.testi figcaption small { display: block; color: var(--tinta-3); font-size: .85rem; }

/* Layanan sekolah ringkas */
.daftar-layanan-ringkas { display: grid; gap: 10px; }
@media (min-width: 560px) { .daftar-layanan-ringkas { grid-template-columns: 1fr 1fr; } }
.daftar-layanan-ringkas li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r2); background: var(--kertas); border: 1px solid var(--garis);
                             font-weight: 500; font-size: 1rem; }
.daftar-layanan-ringkas .ikon { width: 22px; height: 22px; color: var(--giok-600); }
.bagian-putih .daftar-layanan-ringkas li { background: var(--kertas); }
.dua-kolom .tombol { margin-top: 24px; }
.dua-kolom h2 + .teks-besar, .dua-kolom h2 + p { margin-top: 16px; }
.daftar-kampus-ringkas .kampus-lagi { justify-content: center; border-style: dashed; background: transparent; }
.daftar-kampus-ringkas .kampus-lagi a { font-weight: 600; }

/* Artikel (kartu) */
.grid-artikel { display: grid; gap: 16px; }
@media (min-width: 760px) { .grid-artikel { grid-template-columns: repeat(3, 1fr); } }
.kartu-artikel { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r3);
                 text-decoration: none; color: var(--tinta); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.bagian-putih .kartu-artikel { background: var(--kertas); }
.kartu-artikel:hover { border-color: var(--giok-500); transform: translateY(-3px); box-shadow: var(--bayang); color: var(--tinta); }
.kartu-artikel h2, .kartu-artikel h3 { font-family: var(--judul); font-weight: 700; font-size: 1.15rem; line-height: 1.35; letter-spacing: -.01em; }
.kartu-artikel p { font-size: 1rem; color: var(--tinta-2); }
.kartu-artikel-kat { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--merah); }
.kartu-artikel-kaki { margin-top: auto; padding-top: 6px; font-size: .84rem; color: var(--tinta-3); }
.kartu-artikel-foto { margin: -24px -24px 6px; border-radius: var(--r3) var(--r3) 0 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--kertas-2); }
.kartu-artikel-foto img { width: 100%; height: 100%; object-fit: cover; }

/* Pita ajakan */
.bagian-ajakan { background: radial-gradient(900px 420px at 0% 120%, rgba(123, 186, 106, .25), transparent 60%), var(--giok-800); color: #fff; }
.ajakan { display: grid; gap: 28px; align-items: center; }
.ajakan h2 { color: #fff; max-width: 22ch; }
.ajakan-teks p { margin-top: 14px; color: #CFE2D6; max-width: 58ch; font-size: 1.05rem; }
.ajakan-cara { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; color: #DCEBE2; font-size: .94rem; }
.ajakan-cara li { display: inline-flex; align-items: center; gap: 8px; }
.ajakan-cara .ikon { color: var(--daun-terang); }
.ajakan-aksi { display: flex; flex-direction: column; gap: 10px; }
.ajakan-aksi .tombol { width: 100%; }
.ajakan-jam { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .86rem; color: #B9D0C3; }
.ajakan-aksi-kiri { align-items: flex-start; }
@media (min-width: 920px) {
  .ajakan { grid-template-columns: 1.4fr .8fr; }
  .ajakan-aksi .tombol { width: auto; }
  .ajakan-aksi { align-items: stretch; }
}

/* ── Halaman program ──────────────────────────────────────────────────────── */
.foto-lebar { border-radius: var(--r4); overflow: hidden; box-shadow: var(--bayang); aspect-ratio: 16 / 7; background: var(--kertas-2); }
.foto-lebar img { width: 100%; height: 100%; object-fit: cover; }
.tahapan { display: grid; gap: 14px; counter-reset: tahap; }
@media (min-width: 760px) { .tahapan { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tahapan { grid-template-columns: repeat(4, 1fr); } }
.tahap { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r3); }
.tahap:last-child { background: var(--giok-800); border-color: var(--giok-800); color: #fff; }
.tahap:last-child h3 { color: #fff; }
.tahap:last-child p { color: #CFE2D6; }
.tahap-nomor { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: .82rem;
               letter-spacing: .04em; background: var(--merah-100); color: #8E241D; }
.tahap:last-child .tahap-nomor { background: rgba(255, 255, 255, .12); color: #fff; }
.tahap-nomor .ikon { width: 16px; height: 16px; }
.tahap h3 { font-size: 1.18rem; }
.tahap p { color: var(--tinta-2); font-size: 1rem; }
.tahap-tempat { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: .82rem; font-weight: 600; color: var(--tinta-3); }
.tahap:last-child .tahap-tempat { color: var(--daun-terang); }
.kotak-cocok, .kotak-tunda { padding: 26px; border-radius: var(--r3); }
.kotak-cocok { background: var(--giok-50); border: 1px solid var(--giok-100); }
.kotak-tunda { background: var(--kertas); border: 1px solid var(--garis); }
.bagian:not(.bagian-putih) .kotak-tunda { background: var(--putih); }
.kotak-cocok h3, .kotak-tunda h3 { display: flex; align-items: center; gap: 10px; font-size: 1.12rem; margin-bottom: 14px; }
.kotak-cocok h3 .ikon { color: var(--giok-600); width: 22px; height: 22px; }
.kotak-tunda h3 .ikon { color: var(--merah); width: 22px; height: 22px; }
.daftar-cek, .daftar-silang { display: grid; gap: 10px; }
.daftar-cek li, .daftar-silang li { position: relative; padding-left: 28px; color: var(--tinta-2); }
.daftar-cek li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 14px; height: 8px; border-left: 2.5px solid var(--giok-600);
                         border-bottom: 2.5px solid var(--giok-600); transform: rotate(-45deg); }
.daftar-silang li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 10px; height: 2.5px; background: var(--merah); border-radius: 2px; }
.daftar-cek-besar { margin-top: 18px; }
.daftar-cek-besar li { font-size: 1.02rem; }
.tabel-gulir { overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--r3); background: var(--putih); }
.tabel { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .95rem; }
.tabel th, .tabel td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--garis); vertical-align: top; }
.tabel thead th { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); background: var(--kertas); font-weight: 700; }
.tabel tbody th { font-weight: 600; }
.tabel tbody tr:last-child th, .tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover { background: var(--giok-50); }
.angka-sel { font-variant-numeric: tabular-nums; font-weight: 600; }
.tabel-banding td { color: var(--tinta-2); }
.grid-biaya { display: grid; gap: 14px; }
@media (min-width: 760px) { .grid-biaya { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid-biaya { grid-template-columns: repeat(4, 1fr); } }
.biaya { padding: 24px; border-radius: var(--r3); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.biaya .ikon { width: 28px; height: 28px; color: var(--daun-terang); }
.biaya h3 { margin-top: 14px; }
.biaya p { margin-top: 8px; font-size: 1rem; }
.catatan-terang { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; color: #DCEBE2; font-size: 1rem; max-width: 62ch; }
.catatan-terang .ikon { color: var(--daun-terang); margin-top: 3px; }
.langkah { counter-reset: langkah; display: grid; gap: 4px; margin-top: 18px; }
.langkah li { counter-increment: langkah; position: relative; padding: 12px 0 12px 54px; border-bottom: 1px dashed var(--garis-2); }
.langkah li:last-child { border-bottom: 0; }
.langkah li::before { content: counter(langkah); position: absolute; left: 0; top: 10px; width: 38px; height: 38px; display: grid; place-items: center;
                      border-radius: 50%; background: var(--giok-800); color: #fff; font-weight: 700; font-size: .95rem; }
.langkah b { display: block; font-weight: 600; }
.langkah span { display: block; font-size: 1rem; color: var(--tinta-2); }

/* Tanya jawab */
.faq { display: grid; gap: 10px; }
.faq-item { background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r2); }
.bagian-putih .faq-item { background: var(--kertas); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px;
                    font-weight: 600; font-size: 1.02rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .ikon { color: var(--tinta-3); transition: transform .18s ease; }
.faq-item[open] summary .ikon { transform: rotate(180deg); color: var(--merah); }
.faq-item p { padding: 0 20px 20px; color: var(--tinta-2); max-width: 62ch; }
.kotak-tanya { display: grid; gap: 16px; align-items: center; margin-top: 30px; padding: 24px; border-radius: var(--r3); background: var(--giok-50); border: 1px solid var(--giok-100); }
.kotak-tanya > .ikon { width: 34px; height: 34px; color: var(--giok-600); }
.kotak-tanya h2 { font-size: 1.4rem; }
.kotak-tanya p { color: var(--tinta-2); margin-top: 4px; }
@media (min-width: 760px) { .kotak-tanya { grid-template-columns: auto 1fr auto; } }

/* Daftar program */
.daftar-program { display: grid; gap: 12px; }
.program-baris { display: grid; gap: 14px; padding: 24px; background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r3); align-items: center; }
.program-nomor { font-family: var(--judul); font-weight: 800; font-size: 1.35rem; color: var(--merah); line-height: 1; }
.program-teks h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.program-teks h2 a { color: var(--tinta); text-decoration: none; }
.program-teks h2 a:hover { color: var(--giok-700); }
.program-teks p { margin: 8px 0 12px; color: var(--tinta-2); max-width: 70ch; }
@media (min-width: 860px) { .program-baris { grid-template-columns: 70px 1fr auto; } }
.grid-ekosistem { display: grid; gap: 14px; }
@media (min-width: 700px) { .grid-ekosistem { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid-ekosistem { grid-template-columns: repeat(3, 1fr); } }
.ekosistem { padding: 24px; border-radius: var(--r3); background: var(--kertas); border: 1px solid var(--garis); }
.ekosistem h3 { margin-top: 14px; }
.ekosistem p { margin-top: 8px; color: var(--tinta-2); font-size: 1rem; }

/* Mandarin */
.kartu-paket { padding: 28px 24px; border-radius: var(--r3); background: var(--putih); border: 1px solid var(--garis); }
.kartu-paket-sorot { background: var(--giok-800); border-color: var(--giok-800); color: #fff; }
.kartu-paket-sorot h3 { color: #fff; }
.kartu-paket-sorot p { color: #CFE2D6; }
.paket-angka { display: flex; align-items: baseline; gap: 8px; font-family: var(--judul); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--giok-600); }
.kartu-paket-sorot .paket-angka { color: var(--daun-terang); }
.paket-angka small { font-family: var(--sans); font-size: .95rem; font-weight: 600; color: var(--tinta-3); }
.kartu-paket-sorot .paket-angka small { color: #CFE2D6; }
.kartu-paket h3 { margin-top: 16px; }
.kartu-paket p { margin-top: 8px; color: var(--tinta-2); font-size: 1rem; }
.ritme { display: grid; gap: 10px; margin-top: 16px; }
@media (min-width: 760px) { .ritme { grid-template-columns: repeat(3, 1fr); } }
.ritme div { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 16px 18px; border-radius: var(--r2); background: var(--putih); border: 1px dashed var(--garis-2); }
.ritme .ikon { grid-row: span 2; width: 24px; height: 24px; color: var(--merah); margin-top: 2px; }
.ritme b { font-weight: 600; }
.ritme span { font-size: .95rem; color: var(--tinta-2); }
.sorot-orang { display: grid; gap: 22px; align-items: center; padding: 28px; border-radius: var(--r4); background: var(--putih); border: 1px solid var(--garis); }
.sorot-foto { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.sorot-orang h2 { font-size: 1.8rem; }
.sorot-orang p:not(.alis) { margin-top: 8px; color: var(--tinta-2); max-width: 64ch; }
@media (min-width: 700px) { .sorot-orang { grid-template-columns: auto 1fr; } }

/* Study tour */
.ringkas-tur > div { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; padding: 18px; border-radius: var(--r2); background: var(--putih); border: 1px solid var(--garis); }
.ringkas-tur .ikon { grid-row: span 2; width: 26px; height: 26px; color: var(--giok-600); margin-top: 2px; }
.ringkas-tur b { font-weight: 700; }
.ringkas-tur span { font-size: .95rem; color: var(--tinta-3); }
.jadwal-tur { display: grid; gap: 14px; }
@media (min-width: 760px) { .jadwal-tur { grid-template-columns: repeat(2, 1fr); } }
.hari { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: start; padding: 14px; border-radius: var(--r3); background: var(--kertas); border: 1px solid var(--garis); }
.hari-foto { border-radius: var(--r2); overflow: hidden; aspect-ratio: 1 / 1; background: var(--kertas-2); }
.hari-foto img { width: 100%; height: 100%; object-fit: cover; }
.hari-nomor { display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--merah); }
.hari h3 { margin-top: 2px; font-size: 1.05rem; }
.hari p { margin-top: 4px; font-size: 1rem; color: var(--tinta-2); line-height: 1.6; }
@media (min-width: 1100px) { .hari { grid-template-columns: 150px 1fr; } }

/* Magang */
.kartu-jalur { padding: 26px; border-radius: var(--r3); background: var(--putih); border: 1px solid var(--garis); align-self: start; }   /* 9 Okt: kartu tidak meregang mengikuti tetangga (ruang kosong) */
.kartu-jalur h2 { margin-top: 16px; font-weight: 700; font-size: 1.18rem; letter-spacing: -.01em; }
.kartu-jalur p { margin-top: 8px; color: var(--tinta-2); font-size: 1rem; }

/* ── Kampus & jurusan ─────────────────────────────────────────────────────── */
.saring { display: grid; gap: 12px; margin-bottom: 22px; padding: 18px; border-radius: var(--r3); background: var(--putih); border: 1px solid var(--garis); }
.saring-grup { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.saring-label { width: 100%; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.saring-tombol { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--garis-2);
                 background: var(--putih); color: var(--tinta-2); font-weight: 500; font-size: .95rem; cursor: pointer; }
.saring-tombol small { font-size: .78rem; color: var(--tinta-3); font-weight: 600; }
.saring-tombol:hover { border-color: var(--giok-500); }
.saring-tombol[aria-pressed="true"] { background: var(--giok-800); border-color: var(--giok-800); color: #fff; }
.saring-tombol[aria-pressed="true"] small { color: var(--daun-terang); }
.saring-hasil { font-size: .9rem; color: var(--tinta-3); }
@media (min-width: 900px) { .saring-label { width: auto; margin-right: 6px; } }
.daftar-kampus { display: grid; gap: 16px; }
.kampus { padding: clamp(20px, 3vw, 30px); border-radius: var(--r3); background: var(--putih); border: 1px solid var(--garis); }
.kampus[hidden] { display: none; }
.kampus-kepala { display: grid; gap: 14px; grid-template-columns: auto 1fr; align-items: start; }
.kampus-kepala .lencana-baris { grid-column: 1 / -1; }
.kampus-nomor { font-family: var(--judul); font-weight: 800; font-size: 1.3rem; color: var(--merah); line-height: 1.2; }
.kampus h2 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.65rem); line-height: 1.2; }
.kampus-lokasi { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--tinta-3); font-size: .92rem; }
.jurusan { display: grid; gap: 8px; margin-top: 20px; }
@media (min-width: 700px) { .jurusan { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .jurusan { grid-template-columns: repeat(3, 1fr); } }
.jurusan li { padding: 12px 14px; border-radius: var(--r2); background: var(--kertas); border: 1px solid var(--garis); }
.jurusan li[hidden] { display: none; }
.jurusan b { display: block; font-weight: 600; font-size: .95rem; line-height: 1.35; }
.jurusan span { display: block; margin-top: 3px; font-size: .88rem; color: var(--tinta-3); }
.kampus-catatan { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; max-width: 64ch; font-size: 1rem; color: var(--tinta-2); }
.kampus-catatan .ikon { color: var(--giok-600); margin-top: 3px; }

/* ── Untuk sekolah ────────────────────────────────────────────────────────── */
.grid-layanan { display: grid; gap: 14px; }
@media (min-width: 640px) { .grid-layanan { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid-layanan { grid-template-columns: repeat(4, 1fr); } }
.layanan { position: relative; padding: 24px; border-radius: var(--r3); background: var(--putih); border: 1px solid var(--garis); }
.layanan-nomor { position: absolute; top: 18px; right: 20px; font-family: var(--judul); font-weight: 800; font-size: 1.1rem; color: var(--garis-2); }
.layanan h3 { margin-top: 16px; }
.layanan p { margin-top: 8px; font-size: 1rem; color: var(--tinta-2); }

/* ── Formulir ─────────────────────────────────────────────────────────────── */
.formulir { display: grid; gap: 18px; }
.formulir-kartu { padding: clamp(20px, 4vw, 36px); border-radius: var(--r4); background: var(--putih); border: 1px solid var(--garis); box-shadow: var(--bayang); }
.isian { display: grid; gap: 7px; border: 0; margin: 0; padding: 0; min-width: 0; }
.isian-baris { display: grid; gap: 18px; }
@media (min-width: 640px) { .isian-baris { grid-template-columns: 1fr 1fr; } }
.isian > label, .isian > legend { font-weight: 600; font-size: .95rem; padding: 0; }
.wajib { margin-left: 6px; font-size: .76rem; font-weight: 600; color: var(--merah); letter-spacing: .02em; }
.opsional { margin-left: 6px; font-size: .78rem; font-weight: 400; color: var(--tinta-3); }
.formulir input[type="text"], .formulir input[type="tel"], .formulir input[type="email"], .formulir input[type="date"], .formulir select, .formulir textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--garis-2); border-radius: var(--r2); background: var(--putih); color: var(--tinta);
  font: inherit; font-size: 1rem; transition: border-color .15s ease, box-shadow .15s ease; }
.formulir textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.formulir select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinta-3) 50%), linear-gradient(135deg, var(--tinta-3) 50%, transparent 50%);
                   background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.formulir input:focus, .formulir select:focus, .formulir textarea:focus { outline: none; border-color: var(--giok-600); box-shadow: 0 0 0 4px rgba(24, 118, 84, .14); }
.formulir [aria-invalid="true"] { border-color: var(--merah) !important; background: #FFFAF9; }
.pilihan-pil, .pilihan-kotak { display: flex; flex-wrap: wrap; gap: 8px; }
.pilihan-pil label, .pilihan-kotak label { position: relative; cursor: pointer; }
.pilihan-pil input, .pilihan-kotak input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pilihan-pil span, .pilihan-kotak span { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 15px; border-radius: 21px;
                                         border: 1.5px solid var(--garis-2); background: var(--putih); font-size: .93rem; font-weight: 500; transition: all .15s ease; }
.pilihan-kotak span { border-radius: var(--r2); }
.pilihan-kotak span .ikon { color: var(--giok-600); }
.pilihan-pil input:checked + span, .pilihan-kotak input:checked + span { background: var(--giok-50); border-color: var(--giok-600); color: var(--giok-800); font-weight: 600; }
.pilihan-pil input:focus-visible + span, .pilihan-kotak input:focus-visible + span { outline: 3px solid var(--merah); outline-offset: 2px; }
.centang { display: flex; gap: 14px; align-items: flex-start; padding: 4px 0; font-size: .95rem; color: var(--tinta-2); cursor: pointer; font-weight: 400 !important; }
.centang input { width: 24px; height: 24px; margin: 0; accent-color: var(--giok-600); flex-shrink: 0; }   /* ≥ 24 px: WCAG 2.5.8 (uji tayang 9 Okt 2026) */
.isian-galat { display: flex; align-items: center; gap: 6px; font-size: .86rem; color: #9E2A21; font-weight: 500; }
.isian-galat .ikon { width: 15px; height: 15px; }
.kotak-galat { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; margin-bottom: 18px; border-radius: var(--r2); background: var(--merah-100);
               border: 1px solid #F1C5BF; color: #7E2019; font-weight: 500; }
.kotak-galat .ikon { margin-top: 3px; }
.jebakan { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulir .teks-kecil { text-align: center; margin-top: 0; margin-inline: auto; }
.formulir button[disabled] { opacity: .7; cursor: progress; }

/* ── Kontak ───────────────────────────────────────────────────────────────── */
.kontak-isi { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1000px) { .kontak-isi { grid-template-columns: 1.35fr .9fr; } }
.kontak-formulir { padding: clamp(20px, 4vw, 36px); border-radius: var(--r4); background: var(--putih); border: 1px solid var(--garis); box-shadow: var(--bayang); }
.kontak-formulir h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.kontak-formulir > .teks-redup { margin: 8px 0 22px; }
.kontak-samping { display: grid; gap: 14px; }
.kartu-kontak { padding: 24px; border-radius: var(--r3); background: var(--putih); border: 1px solid var(--garis); }
.kartu-kontak h2 { font-weight: 700; font-size: 1.1rem; margin-bottom: 14px; }
.kontak-baris { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; color: var(--tinta-2); font-size: 1rem; }
.kontak-baris .ikon { color: var(--giok-600); margin-top: 3px; }
.kontak-tautan { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--garis); text-decoration: none; color: var(--tinta); }
.kontak-tautan:last-child { border-bottom: 0; }
.kontak-tautan .ikon { width: 22px; height: 22px; color: var(--giok-600); }
.kontak-tautan b { display: block; font-size: .8rem; font-weight: 600; color: var(--tinta-3); }
.kontak-tautan:hover { color: var(--giok-700); }
.kartu-kontak-hijau { background: var(--giok-50); border-color: var(--giok-100); }
.kartu-kontak-hijau p { color: var(--tinta-2); font-size: 1rem; margin-bottom: 14px; }
.peta { border-radius: var(--r3); overflow: hidden; border: 1px solid var(--garis); background: var(--kertas-2); height: clamp(280px, 38vw, 460px); }
.peta iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Peta klik-untuk-buka (10 Okt 2026): kotak ringan bergaris kisi sampai pengunjung menekan "Tampilkan peta di sini" */
.peta-tunda { height: auto; min-height: clamp(280px, 38vw, 460px); display: grid; place-items: center; padding: 24px 16px; text-align: center;
              background-color: var(--kertas-2);
              background-image: linear-gradient(var(--garis) 1px, transparent 1px), linear-gradient(90deg, var(--garis) 1px, transparent 1px);
              background-size: 32px 32px; }
.peta-sampul { display: grid; justify-items: center; gap: 14px; max-width: 34rem; padding: 22px 20px; border-radius: var(--r3);
               background: var(--putih); border: 1px solid var(--garis); box-shadow: 0 18px 40px -28px rgba(16, 32, 26, .45); }
.peta-pin .ikon { width: 34px; height: 34px; color: var(--merah); }
.peta-alamat { margin: 0; font-weight: 600; color: var(--tinta); line-height: 1.6; }
.peta-tombol { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ── Tentang ──────────────────────────────────────────────────────────────── */
.pesan-pimpinan { display: grid; gap: 24px; padding: clamp(22px, 4vw, 40px); border-radius: var(--r4); background: var(--putih); border: 1px solid var(--garis); }
.pesan-foto img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.pesan-pimpinan blockquote { margin: 0; font-weight: 500; font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); line-height: 1.75; color: var(--tinta); max-width: 66ch; }
.pesan-pimpinan blockquote p + p { margin-top: 14px; }
.pesan-pimpinan figcaption { margin-top: 18px; }
.pesan-pimpinan figcaption b { display: block; font-weight: 600; }
.pesan-pimpinan figcaption span { color: var(--tinta-3); font-size: .92rem; }
.pesan-asli { margin-top: 18px; border-top: 1px dashed var(--garis-2); padding-top: 14px; }
.pesan-asli summary { cursor: pointer; font-weight: 600; color: var(--giok-700); }
.pesan-asli div { margin-top: 12px; display: grid; gap: 10px; color: var(--tinta-2); font-size: 1rem; max-width: 64ch; }
@media (min-width: 820px) { .pesan-pimpinan { grid-template-columns: 160px 1fr; } .pesan-foto img { width: 160px; height: 160px; } }
.linimasa { display: grid; gap: 14px; }
@media (min-width: 900px) { .linimasa { grid-template-columns: repeat(4, 1fr); } }
.linimasa li { position: relative; padding: 24px 22px; border-radius: var(--r3); background: var(--kertas); border: 1px solid var(--garis); }
.linimasa-tahun { display: block; font-family: var(--judul); font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--giok-600); }
.linimasa li:last-child { background: var(--giok-800); border-color: var(--giok-800); color: #fff; }
.linimasa li:last-child h3 { color: #fff; }
.linimasa li:last-child p { color: #CFE2D6; }
.linimasa li:last-child .linimasa-tahun { color: var(--daun-terang); }
.linimasa h3 { margin-top: 14px; }
.linimasa p { margin-top: 8px; color: var(--tinta-2); font-size: 1rem; }
.visi { font-family: var(--judul); font-weight: 700; letter-spacing: -.015em; font-size: clamp(1.35rem, 1.15rem + .9vw, 1.85rem); line-height: 1.35; color: #fff; }
.misi { counter-reset: misi; display: grid; gap: 14px; }
.misi li { counter-increment: misi; position: relative; padding-left: 46px; color: #D6E6DC; }
.misi li::before { content: counter(misi); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
                   background: rgba(255, 255, 255, .1); color: var(--daun-terang); font-weight: 700; }
.misi b { color: #fff; font-weight: 600; }
.grid-tantangan { display: grid; gap: 14px; }
@media (min-width: 760px) { .grid-tantangan { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid-tantangan { grid-template-columns: repeat(4, 1fr); } }
.grid-tantangan li { padding: 24px; border-radius: var(--r3); background: var(--putih); border: 1px solid var(--garis); }
.grid-tantangan span { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--merah-100); color: #8E241D; font-weight: 700; }
.grid-tantangan h3 { margin-top: 14px; }
.grid-tantangan p { margin-top: 8px; color: var(--tinta-2); font-size: 1rem; }
.grid-tim { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
@media (min-width: 700px) { .grid-tim { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .grid-tim { grid-template-columns: repeat(7, 1fr); } }
.anggota { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.anggota-foto { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; border: 4px solid var(--putih); box-shadow: var(--bayang); }
.anggota b { font-weight: 600; font-size: .98rem; line-height: 1.3; }
.anggota span { font-size: .84rem; color: var(--tinta-2); line-height: 1.4; }
.anggota small { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--merah); font-weight: 600; }
.anggota small .ikon { width: 13px; height: 13px; }

/* ── Terima kasih & 404 ───────────────────────────────────────────────────── */
.bagian-terima { padding-block: clamp(64px, 10vw, 120px); }
.terima-ikon { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--giok-50); color: var(--giok-600); margin-bottom: 22px; }
.terima-ikon .ikon { width: 40px; height: 40px; }
.terima-ikon-abu { background: var(--kertas-2); color: var(--tinta-3); }
.bagian-terima h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); }
.bagian-terima .pembuka { margin: 16px auto 0; max-width: 56ch; font-size: 1.1rem; color: var(--tinta-2); }
.bagian-terima .teks-redup { margin-top: 18px; }
.kode-kiriman { margin-top: 16px; display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--putih); border: 1px dashed var(--garis-2); font-size: .92rem; }
.tautan-404 { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 30px; }

/* ── Artikel (modul blog) ─────────────────────────────────────────────────── */
.kosong { padding: 60px 20px; text-align: center; color: var(--tinta-3); }
.grid-artikel-penuh .kartu-artikel h2 { font-size: 1.35rem; }
.paginasi { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 30px; }
.paginasi a, .paginasi span { min-width: 42px; padding: 8px 14px; text-align: center; border-radius: 999px; border: 1.5px solid var(--garis-2); text-decoration: none; color: var(--tinta-2); }
.paginasi span[aria-current] { background: var(--giok-800); border-color: var(--giok-800); color: #fff; }
.ajakan-artikel { display: grid; gap: 18px; align-items: center; margin-top: 36px; padding: clamp(20px, 3vw, 30px); border-radius: var(--r3); background: var(--giok-800); color: #fff; }
.ajakan-artikel h2 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); color: #fff; }
.ajakan-artikel p { margin-top: 8px; color: #CFE2D6; }
.ajakan-artikel-aksi { display: flex; flex-wrap: wrap; gap: 10px; }
.ajakan-artikel .tombol-garis { color: #fff; border-color: rgba(255, 255, 255, .4); }
.ajakan-artikel .tombol-garis:hover { background: rgba(255, 255, 255, .08); color: #fff; border-color: #fff; }
@media (min-width: 900px) { .ajakan-artikel { grid-template-columns: 1fr auto; } }
.judul-artikel h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); line-height: 1.12; }
.artikel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 18px; font-size: .9rem; color: var(--tinta-3); }
.artikel-meta .ikon { width: 15px; height: 15px; }
.artikel-badan { padding-bottom: clamp(48px, 7vw, 88px); }
.artikel-gambar { margin-bottom: 28px; border-radius: var(--r3); overflow: hidden; }
.isi-artikel { font-size: 1.08rem; line-height: 1.85; color: var(--tinta); overflow-wrap: break-word; }
.isi-artikel a { overflow-wrap: anywhere; }
.isi-artikel > * + * { margin-top: 1.1em; }
.isi-artikel h2 { font-weight: 700; font-size: clamp(1.4rem, 1.22rem + .7vw, 1.75rem); margin-top: 1.8em; scroll-margin-top: calc(var(--tinggi-kepala) + 20px); }
.isi-artikel h3 { font-size: 1.2rem; margin-top: 1.5em; scroll-margin-top: calc(var(--tinggi-kepala) + 20px); }
.isi-artikel ul, .isi-artikel ol { padding-left: 1.3em; }
.isi-artikel ul { list-style: disc; }
.isi-artikel ol { list-style: decimal; }
.isi-artikel li + li { margin-top: .45em; }
.isi-artikel li::marker { color: var(--giok-600); }
.isi-artikel blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--merah); color: var(--tinta-2); font-weight: 500; font-size: 1.1rem; }
.isi-artikel img { border-radius: var(--r2); margin: 1.4em 0; }
.isi-artikel a { color: var(--giok-700); }
.btabel-bungkus { overflow-x: auto; }
.isi-artikel table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: .95rem; }
.isi-artikel th, .isi-artikel td { border: 1px solid var(--garis); padding: 10px 12px; text-align: left; }
.isi-artikel th { background: var(--kertas-2); }
.btoc { margin-bottom: 28px; padding: 18px 22px; border-radius: var(--r3); background: var(--putih); border: 1px solid var(--garis); border-left: 4px solid var(--giok-600); }
.btoc-judul { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--giok-700); margin-bottom: 8px; }
.btoc ol { list-style: decimal; padding-left: 20px; display: grid; gap: 4px; font-size: .96rem; }
.btoc .sub { margin-left: 16px; list-style: circle; }
.btoc a { color: var(--tinta-2); text-decoration: none; }
.btoc a:hover { color: var(--giok-700); text-decoration: underline; }
.bagikan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--garis); }
.bagikan > span { font-weight: 600; font-size: .92rem; color: var(--tinta-3); }
.bagikan > div { display: flex; flex-wrap: wrap; gap: 8px; }
.nav-artikel { display: grid; gap: 12px; margin-top: 26px; }
@media (min-width: 640px) { .nav-artikel { grid-template-columns: 1fr 1fr; } }
.nav-artikel a { display: block; padding: 16px 18px; border-radius: var(--r2); background: var(--putih); border: 1px solid var(--garis); text-decoration: none; color: var(--tinta); }
.nav-artikel a:hover { border-color: var(--giok-500); }
.nav-artikel small { display: block; font-size: .78rem; color: var(--tinta-3); font-weight: 600; }
.nav-artikel b { display: block; margin-top: 4px; font-weight: 600; line-height: 1.4; }
.nav-artikel .kanan { text-align: right; }
.penulis { display: flex; gap: 14px; align-items: flex-start; margin-top: 26px; padding: 20px; border-radius: var(--r3); background: var(--putih); border: 1px solid var(--garis); }
.penulis img { width: 56px; height: 56px; border-radius: 50%; }
.penulis b { display: block; font-weight: 600; }
.penulis small { display: block; color: var(--tinta-3); font-size: .85rem; }
.penulis p { margin-top: 8px; font-size: .92rem; color: var(--tinta-2); }

/* ── Kaki situs ───────────────────────────────────────────────────────────── */
.kaki { background: var(--giok-900); color: #C9DBD0; padding-top: clamp(48px, 6vw, 72px); }
.kaki-grid { display: grid; gap: 34px; }
@media (min-width: 760px) { .kaki-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .kaki-grid { grid-template-columns: 1.35fr .9fr .7fr 1.15fr; } }
.kaki-merek p { margin-top: 16px; font-size: .94rem; max-width: 40ch; color: #B5CCBF; }
/* Kaki: "lockup" seperti logo asli (Pak Andre 9 Okt 17.02) — U setinggi blok teks (UOS EduCon … baris Inggris); Mandarin & Inggris di tengah,
   batas kiri-kanan = lebar "UOS EduCon". Ukuran dalam em dari skala lockup; rasio lebar diukur dari huruf Figtree: "UOS EduCon" 800 = 6,008 em,
   "Synchronize Campus with Industries" 700 = 16,776 em → Inggris .355em; Mandarin 7 huruf + spasi .12em = 7,84 em → .47em (± 61% lebar nama). */
.kaki .kaki-merek .merek { display: inline-grid; grid-template-columns: auto auto; column-gap: .45em; align-items: stretch; font-size: 2rem; }
.kaki .kaki-merek .merek .merek-tanda { width: auto; height: 100%; max-width: none; }
.kaki .kaki-merek .merek-teks b { font-size: 1em; }
.kaki .kaki-merek .merek-teks small { font-size: .4em; margin-top: .35em; }
.kaki .kaki-merek .merek-pil { font-size: 1em; margin-top: 0; }
.merek-slogan { display: flex; flex-direction: column; align-items: center; align-self: stretch; width: 0; min-width: 100%; margin-top: .4em;
                font-family: var(--judul); font-weight: 700; color: var(--daun-terang); }
.merek-slogan span { white-space: nowrap; }
.merek-slogan [lang="zh"] { font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", sans-serif; font-size: .47em;
                            line-height: 1.3; letter-spacing: .12em; margin-right: -.12em; }
.merek-slogan [lang="en"] { font-size: .355em; line-height: 1.35; }
@media (max-width: 639px) { .kaki .kaki-merek .merek { font-size: 1.8rem; } }
.kaki-judul { font-family: var(--sans); font-weight: 700; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--daun-terang); }
.kaki-daftar { margin-top: 14px; display: grid; gap: 10px; }
.kaki-daftar a { display: inline-block; padding-block: 3px; color: #D5E4DB; text-decoration: none; font-size: .95rem; }   /* sasaran sentuh ≥ 24 px */
.kaki-daftar a:hover { color: #fff; text-decoration: underline; }
.kaki-alamat { margin-top: 14px; display: grid; gap: 12px; font-size: .93rem; }
.kaki-alamat a, .kaki-jam { display: flex; gap: 10px; align-items: flex-start; color: #D5E4DB; text-decoration: none; }
.kaki-alamat a:hover { color: #fff; }
.kaki-alamat .ikon { color: var(--daun-terang); margin-top: 3px; }
.kaki-bawah { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 44px; padding-block: 22px 26px; border-top: 1px solid rgba(255, 255, 255, .1);
              font-size: .85rem; color: #9DB8A9; }
.kaki-bawah a { color: #D5E4DB; }
/* Tidak ada tombol WhatsApp melayang: tombol WhatsApp & "Konsultasi gratis" sudah selalu terlihat di kepala yang menempel,
   dan tombol melayang terbukti menutupi teks di HP (keluhan di situs SITUNEO). */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .kepala, .kaki, .wa-melayang, .pita-pratinjau, .bagian-ajakan { display: none !important; }
  body { background: #fff; }
}

/* ── Revisi 8 Okt 2026: foto natural (hero, kartu layanan, sasaran, galeri, legalitas, kontak per layanan) ── */
.hero-foto { position: relative; border-radius: var(--r4); overflow: hidden; box-shadow: var(--bayang-besar); background: var(--kertas-2); }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; }
.hero-sorot { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-sorot span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .93);
                   color: var(--tinta); font-size: .84rem; font-weight: 600; box-shadow: var(--bayang); }
.hero-sorot .ikon { width: 15px; height: 15px; color: var(--giok-600); }
.grid-layanan-foto { display: grid; gap: 16px; }
@media (min-width: 700px) { .grid-layanan-foto { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid-layanan-foto { grid-template-columns: repeat(3, 1fr); } }
.kartu-layanan { position: relative; display: flex; flex-direction: column; background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r4);
                 overflow: hidden; color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.kartu-layanan:hover, .kartu-layanan:focus-visible { transform: translateY(-3px); box-shadow: var(--bayang); border-color: var(--giok-500); color: var(--tinta); }
.kartu-layanan-foto { aspect-ratio: 3 / 2; overflow: hidden; background: var(--kertas-2); }
.kartu-layanan-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.kartu-layanan:hover .kartu-layanan-foto img { transform: scale(1.03); }
.kartu-layanan-isi { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.kartu-layanan h3 { font-size: 1.12rem; }
.kartu-layanan p { color: var(--tinta-2); font-size: 1rem; }
.kartu-layanan .kartu-untuk { margin-top: auto; padding-top: 10px; }
.kartu-layanan .kartu-panah { top: auto; bottom: 18px; right: 20px; }
.grid-sasaran { display: grid; gap: 16px; }
@media (min-width: 760px) { .grid-sasaran { grid-template-columns: 1fr 1fr; } }
.sasaran { display: grid; grid-template-columns: 128px 1fr; gap: 18px; align-items: start; padding: 18px; background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r4); }
.sasaran-foto { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--kertas-2); }
.sasaran-foto img { width: 100%; height: 100%; object-fit: cover; }
.sasaran h3 { font-size: 1.1rem; margin-top: 6px; }
.sasaran p { color: var(--tinta-2); font-size: 1rem; margin-top: 6px; }
.sasaran-tautan { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@media (max-width: 480px) { .sasaran { grid-template-columns: 1fr; } .sasaran-foto { max-width: 160px; } }
.grid-alasan-lima { display: grid; gap: 14px; }
@media (min-width: 700px) { .grid-alasan-lima { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid-alasan-lima { grid-template-columns: repeat(5, 1fr); } }
.alasan-kartu { padding: 20px; background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r4); }
.alasan-kartu h3 { font-size: 1.02rem; margin-top: 12px; }
.alasan-kartu p { color: var(--tinta-2); font-size: 1rem; margin-top: 6px; }
.foto-isi-penuh { position: relative; border-radius: var(--r4); overflow: hidden; box-shadow: var(--bayang); background: var(--kertas-2); }
.foto-isi-penuh img { width: 100%; height: 100%; object-fit: cover; }
.galeri-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .galeri-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .galeri-grid { grid-template-columns: repeat(4, 1fr); } }
.galeri-item { position: relative; border-radius: 14px; overflow: hidden; background: var(--kertas-2); aspect-ratio: 3 / 2; }
.galeri-item img, .galeri-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeri-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; font-size: .8rem; line-height: 1.35; color: #fff;
                          background: linear-gradient(transparent, rgba(0, 0, 0, .68)); }
.galeri-video { aspect-ratio: 480 / 608; background: #111; }   /* video kiriman UOS 480×608 (4:5) — bingkai mengikuti rasionya, tanpa bilah hitam (9 Okt 2026) */
.galeri-video.rasio-9x16 { aspect-ratio: 9 / 16; }
.galeri-video.rasio-4x5 { aspect-ratio: 480 / 608; }
.galeri-video.rasio-16x9 { aspect-ratio: 16 / 9; }   /* video mendatar (9 Okt 2026 malam: video gabungan Pak Andre) */
.galeri-video-kartu.lebar { grid-column: 1 / -1; max-width: 960px; }
.galeri-video video { object-fit: contain; }
.galeri-grid-video { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 340px)); align-items: start; }
.galeri-video-kartu { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.galeri-video-kartu figcaption { display: flex; flex-direction: column; gap: 4px; font-size: 1rem; line-height: 1.6; }
.galeri-video-kartu figcaption b { font-family: 'Figtree', 'Inter', sans-serif; font-weight: 800; font-size: 1.05rem; line-height: 1.35; }
.legalitas { display: grid; gap: 12px; }
@media (min-width: 760px) { .legalitas { grid-template-columns: repeat(3, 1fr); } }
.legalitas div { padding: 18px 20px; background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r4); }
.legalitas small { display: block; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; }
.legalitas b { display: block; margin-top: 6px; font-family: var(--judul); font-size: 1.05rem; overflow-wrap: anywhere; }
.legalitas span { display: block; margin-top: 4px; color: var(--tinta-2); font-size: .95rem; line-height: 1.6; }
.kontak-orang { display: grid; gap: 12px; }
@media (min-width: 760px) { .kontak-orang { grid-template-columns: repeat(3, 1fr); } }
.orang { display: flex; gap: 14px; align-items: center; padding: 16px; background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r4); }
.orang .kartu-ikon { flex-shrink: 0; }
.orang b { display: block; }
.orang span { display: block; color: var(--tinta-2); font-size: .95rem; }
.orang a { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; color: var(--giok-700); text-decoration: none; }
.orang a:hover { text-decoration: underline; }
.bagian-hijau .orang { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); }
.bagian-hijau .orang b { color: #fff; }
.bagian-hijau .orang span { color: #C3D6CB; }
.bagian-hijau .orang a { color: var(--daun-terang); }
.sub-layanan { display: grid; gap: 14px; }
@media (min-width: 760px) { .sub-layanan { grid-template-columns: 1fr 1fr; } }
.sub-layanan article { display: flex; flex-direction: column; align-self: start; background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r4); overflow: hidden; }   /* align-self start: kartu tidak meregang (9 Okt) */
.sub-layanan-foto { aspect-ratio: 3 / 2; background: var(--kertas-2); }
.sub-layanan-foto img { width: 100%; height: 100%; object-fit: cover; }
.sub-layanan-isi { padding: 18px 20px 20px; }
.sub-layanan h3 { display: flex; gap: 10px; align-items: center; font-size: 1.08rem; }
.sub-layanan h3 .ikon { color: var(--giok-600); }
.sub-layanan p { color: var(--tinta-2); font-size: 1rem; margin-top: 8px; }
.daftar-mitra-pt { display: grid; gap: 12px; }
@media (min-width: 700px) { .daftar-mitra-pt { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .daftar-mitra-pt { grid-template-columns: repeat(3, 1fr); } }
.mitra-pt { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r3); color: inherit; text-decoration: none; }
.mitra-pt:hover { border-color: var(--giok-500); color: var(--tinta); }
.mitra-pt b { display: block; font-family: var(--judul); font-size: 1rem; line-height: 1.3; }
.mitra-pt span { display: block; color: var(--tinta-2); font-size: .95rem; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .kartu-layanan, .kartu-layanan-foto img { transition: none; } .kartu-layanan:hover { transform: none; } .kartu-layanan:hover .kartu-layanan-foto img { transform: none; } }
/* kelas jarak (CSP style-src 'self' melarang atribut style) */
/* .jarak-atas-* ada di AKHIR berkas (9 Okt sore) — di sini kalah oleh .foto-label { margin: 0 } → foto menempel ke tombol */
.lebar-760-tengah { max-width: 760px; margin: 0 auto 28px; }
.keterangan-foto { padding: 10px 14px; margin-inline: auto; }

/* ═══ v2 (9 Okt 2026): desain berseni — motif kisi, jalur penerbangan, tumpukan foto, angka beremas, cap, bilah sosmed, gerak muncul ═══ */
:root { --emas: #C9A227; --emas-100: #FBF3D6; --emas-700: #7D6210; --biru-logo: #A3F6FE; }
@media (min-width: 1240px) { :root { --tinggi-kepala: 80px; } }

/* motif kisi Tiongkok (窗花) tipis — pola SVG dalam CSS (img-src data: diizinkan CSP) */
.motif-kisi { position: relative; }
.motif-kisi::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 2 62 32 32 62 2 32Z M32 14 50 32 32 50 14 32Z M32 24 40 32 32 40 24 32Z' fill='none' stroke='%23135F47' stroke-opacity='.11' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(900px 600px at 80% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(900px 600px at 80% 30%, #000 20%, transparent 75%); }
.motif-kisi > * { position: relative; z-index: 1; }
.bagian-hijau.motif-kisi::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 2 62 32 32 62 2 32Z M32 14 50 32 32 50 14 32Z' fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(700px 500px at 15% 80%, #000 20%, transparent 75%); mask-image: radial-gradient(700px 500px at 15% 80%, #000 20%, transparent 75%); }

/* kepala: logo asli UOS (lingkaran) + "UOS EduCon" / nama PT seperti versi awal (Rifal & Pak Andre, 9 Okt 2026 sore) */
.merek { gap: 12px; }
.merek .merek-tanda { width: 48px; height: 48px; border-radius: 0; }
.merek-teks { line-height: 1; }
.merek-teks b { font-size: 1.5rem; letter-spacing: .005em; color: var(--giok-600); }
.merek-teks b .merek-kedua { font-weight: 700; color: var(--giok-500); }
.merek-teks small { font-size: .76rem; letter-spacing: .01em; text-transform: none; margin-top: 4px; line-height: 1.25; }
.merek-terang .merek-teks b { color: #fff; }
.merek-terang .merek-teks b .merek-kedua { color: var(--daun-terang); }
/* pil "Show your story" (dari dalam logo) — hanya di kaki situs sejak 9 Okt sore (Pak Andre); kepala memakai nama PT */
.merek-pil { display: inline-block; margin-top: 5px; padding: 2px 9px 3px; border-radius: 7px; background: var(--giok-500); color: #fff; font-size: .76rem;
             font-weight: 700; letter-spacing: .02em; line-height: 1.4; font-family: var(--judul); }
.merek-terang .merek-pil { background: var(--daun); color: var(--giok-900); }
@media (min-width: 560px) { .merek .merek-tanda { width: 56px; height: 56px; } }
@media (min-width: 1240px) { .merek .merek-tanda { width: 64px; height: 64px; } .merek-teks b { font-size: 1.62rem; } }
.kaki .merek .merek-tanda { width: 72px; height: 72px; }

/* bilah media sosial di atas kepala (nama akun tampil di komputer; HP: ikon saja) */
.bilah-sosial { background: var(--giok-900); color: #CFE2D6; font-size: .82rem; }
.bilah-sosial-isi { display: flex; align-items: center; justify-content: space-between; gap: 6px 18px; min-height: 36px; }
.bilah-sosial-slogan { display: none; color: #B9D0C3; }
.bilah-sosial-daftar { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-left: auto; }
.bilah-sosial a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 2px; color: #fff; text-decoration: none; font-weight: 500; }
.bilah-sosial a:hover { color: var(--daun-terang); }
.bilah-sosial .sosial-nanti { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 2px; color: #fff; font-weight: 500; cursor: default; }   /* akun yang belum dibuat: nama tampil, tanpa tautan mati */
.bilah-sosial .ikon { width: 16px; height: 16px; }
.bilah-sosial .sosial-nama { display: none; }
@media (min-width: 760px) { .bilah-sosial-slogan { display: inline; } .bilah-sosial .sosial-nama { display: inline; } }

/* hero v2: tumpukan foto + jalur penerbangan + cap */
.hero-v2::before { background: radial-gradient(640px 400px at 90% 10%, rgba(163, 246, 254, .28), transparent 65%),
                               radial-gradient(520px 320px at 6% 100%, rgba(201, 162, 39, .10), transparent 70%); }
.tumpuk { position: relative; isolation: isolate; width: 100%; aspect-ratio: 5 / 4; margin-top: 8px; }   /* width 100%: margin auto di HP membuat kotak grid menyusut ke 0 */
.tumpuk picture, .panggung-foto picture, .strip-kota picture, .kartu-layanan-foto picture, .sasaran-foto picture, .galeri-item picture,
.hari-foto picture, .kampus-foto picture, .kartu-artikel-foto picture, .foto-lebar picture, .hero-foto picture, .foto-bingkai picture,
.foto-isi-penuh picture, .sub-layanan-foto picture { height: 100%; }   /* bingkai ber-aspect-ratio + img 100%: picture juga 100% — tanpa ini ada kotak kosong di bawah foto (T65, 9 Okt) */
.tumpuk-utama { position: absolute; z-index: 1; inset: 0 0 11% 9%; border-radius: 26px 26px 26px 96px; overflow: hidden; box-shadow: var(--bayang-besar); background: var(--kertas-2); }
.tumpuk-utama .putar-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.tumpuk-utama .putar-slide.aktif { opacity: 1; }
.tumpuk-utama img { width: 100%; height: 100%; object-fit: cover; }
.tumpuk-utama .hero-sorot { z-index: 2; left: 14px; top: 14px; right: auto; bottom: auto; flex-direction: column; align-items: flex-start; }   /* kiri atas: kanan bawah ditempati foto kecil & cap */
.tumpuk-sorot-hp { display: none; }
@media (max-width: 999px) { .tumpuk-utama .hero-sorot { display: none; } .tumpuk-sorot-hp { display: flex; } }
.tumpuk-kedua { position: absolute; z-index: 2; left: -3%; bottom: 0; width: 42%; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; box-shadow: var(--bayang-besar);
                transform: rotate(-3deg); border: 4px solid var(--kertas); background: var(--kertas-2); }
.tumpuk-ketiga { position: absolute; z-index: 2; right: -2%; top: -5%; width: 31%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: var(--bayang);
                 border: 4px solid var(--kertas); transform: rotate(3deg); background: var(--kertas-2); }
.tumpuk-kedua img, .tumpuk-ketiga img { width: 100%; height: 100%; object-fit: cover; }
.tumpuk-label { position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: 8px; background: rgba(16, 32, 26, .78); color: #fff; font-size: .76rem;
                font-weight: 600; letter-spacing: .02em; }
.cap { position: absolute; display: grid; place-items: center; width: 104px; height: 104px; padding: 10px; border-radius: 50%; border: 2px dashed var(--merah);
       color: var(--merah); background: rgba(255, 255, 255, .92); font-family: var(--judul); font-weight: 800; font-size: .76rem; line-height: 1.25; text-align: center;
       text-transform: uppercase; letter-spacing: .08em; transform: rotate(-8deg); box-shadow: var(--bayang); }
.cap-hero { right: 2%; bottom: 8%; z-index: 6; }
.jalur-svg { position: absolute; inset: -6% -4% -2% -8%; width: 112%; height: 108%; pointer-events: none; overflow: visible; z-index: 5; }
.jalur-svg .jalur-halo { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 7; stroke-linecap: round; }
.jalur-svg .jalur-garis { fill: none; stroke: var(--merah); stroke-width: 2.5; stroke-dasharray: 8 9; stroke-linecap: round; opacity: .95; }
.jalur-svg .jalur-pesawat-latar { fill: #fff; stroke: var(--merah); stroke-width: 1.5; }
.jalur-svg .jalur-titik { fill: var(--merah); }
.jalur-svg .jalur-pesawat { fill: var(--giok-700); }
@media (prefers-reduced-motion: no-preference) {
  .jalur-svg .jalur-garis { animation: jalur-terbang 24s linear infinite; }
  @keyframes jalur-terbang { to { stroke-dashoffset: -320; } }
}
@media (max-width: 999px) {
  .tumpuk { max-width: 560px; margin-inline: auto; }
  /* HP: keping label jadi baris biasa di bawah tumpukan (tidak bertumpuk dengan cap & foto kecil) */
  .tumpuk-utama .hero-sorot { position: static; margin-top: 0; }
  .tumpuk { display: grid; gap: 14px; }
  .tumpuk-sorot-hp { display: flex; flex-wrap: wrap; gap: 8px; }
  .cap-hero { width: 100px; height: 100px; font-size: .76rem; right: 0; bottom: 12%; }
}

/* angka besar beremas */
.angka b { font-size: clamp(2.3rem, 1.7rem + 2.2vw, 3.3rem); color: var(--giok-800); letter-spacing: -.02em; }
.angka b::after { content: ''; display: block; width: 36px; height: 4px; margin-top: 10px; border-radius: 2px; background: var(--emas); }
.angka span { font-size: .95rem; max-width: 30ch; }

/* lima pilar EduCon */
.pilar-grid { display: grid; gap: 12px; }
@media (min-width: 700px) { .pilar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .pilar-grid { grid-template-columns: repeat(5, 1fr); } }
.pilar { padding: 18px 16px 20px; background: var(--putih); border: 1px solid var(--garis); border-top: 4px solid var(--emas); border-radius: 16px; }
.pilar .kartu-ikon { background: var(--emas-100); color: var(--emas-700); border-color: #EFDFA8; }
.pilar b { display: block; margin-top: 12px; font-family: var(--judul); font-size: 1.02rem; line-height: 1.3; }
.pilar small { display: block; margin-top: 5px; font-size: .95rem; color: var(--tinta-2); line-height: 1.5; }

/* "panggung": foto lebar penuh + satu kalimat kuat */
.panggung { position: relative; min-height: clamp(380px, 48vw, 600px); display: grid; align-items: end; overflow: hidden; color: #fff; }
.panggung-foto { position: absolute; inset: 0; }
.panggung-foto img { width: 100%; height: 100%; object-fit: cover; }
.panggung::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7, 46, 35, .12) 0%, rgba(7, 46, 35, .80) 72%); }
.panggung-isi { position: relative; z-index: 2; padding-block: clamp(36px, 6vw, 72px); }
.panggung .alis { background: rgba(255, 255, 255, .14); color: #fff; }
.panggung h2 { color: #fff; max-width: 18ch; font-size: clamp(1.8rem, 1.25rem + 2.4vw, 3rem); }
.panggung p { color: #D5E4DB; max-width: 56ch; margin-top: 14px; font-size: 1.08rem; }
.panggung .hero-aksi { margin-top: 22px; }
.kredit-mini { position: absolute; right: var(--tepi); bottom: 10px; z-index: 2; font-size: .76rem; color: rgba(255, 255, 255, .8); }
.kredit-mini a { color: inherit; }

/* strip kota kampus (beranda) */
.strip-kota { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-bottom: 22px; }
.strip-kota figure { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--kertas-2); box-shadow: var(--bayang); }
.strip-kota img { width: 100%; height: 100%; object-fit: cover; }
.strip-kota figcaption { position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: 8px; background: rgba(16, 32, 26, .78); color: #fff; font-size: .76rem; font-weight: 600; }
@media (max-width: 599px) { .strip-kota { grid-template-columns: 1fr 1fr; } .strip-kota figure:nth-child(3) { display: none; } }

/* pembatas melengkung & latar bertekstur */
.lengkung { border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0; }
.bagian-hijau.lengkung + .bagian { padding-top: clamp(56px, 7.5vw, 100px); }
.alis-terang { background: rgba(255, 255, 255, .14); color: #fff; }

/* gerak muncul (hanya bila JS aktif; mati pada "kurangi gerak") */
html.js .muncul { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
html.js .muncul.tampak { opacity: 1; transform: none; }
html.js .muncul:nth-child(2) { transition-delay: .08s; } html.js .muncul:nth-child(3) { transition-delay: .16s; }
html.js .muncul:nth-child(4) { transition-delay: .24s; } html.js .muncul:nth-child(5) { transition-delay: .32s; } html.js .muncul:nth-child(6) { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) { html.js .muncul { opacity: 1; transform: none; transition: none; } .tumpuk-utama .putar-slide { transition: none; } }
/* pengaman 10 Okt 2026: kelas js kini dipasang di <head> — bila uos.js gagal dimuat, .muncul tetap tampil sendiri setelah 4 dtk */
@keyframes muncul-cadangan { to { opacity: 1; transform: none; } }
html.js .muncul:not(.tampak) { animation: muncul-cadangan .5s ease 4s forwards; }

/* halaman kredit foto */
.kredit-daftar { display: grid; gap: 10px; }
.kredit-daftar li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; background: var(--putih); border: 1px solid var(--garis); border-radius: 12px; }
.kredit-daftar li > div { min-width: 0; overflow-wrap: anywhere; }
.kredit-daftar b { font-size: .98rem; }
.teks-isi { max-width: 68ch; }
.kredit-daftar img { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; }
.kredit-daftar span { display: block; font-size: .95rem; color: var(--tinta-2); }

/* v2 putaran 2: foto per kampus, daftar dokumen, strip kehidupan kampus */
.kampus.punya-foto { display: grid; grid-template-columns: 1fr; }
.kampus-foto { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--kertas-2); margin-top: 16px; }
.kampus-foto img { width: 100%; height: 100%; object-fit: cover; }
.kampus-foto figcaption { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 7px; background: rgba(16, 32, 26, .78); color: #fff; font-size: .76rem; font-weight: 600; }
@media (min-width: 760px) {
  .kampus.punya-foto { grid-template-columns: 1fr 180px; column-gap: 22px; }
  .kampus.punya-foto > .kampus-kepala, .kampus.punya-foto > .jurusan, .kampus.punya-foto > .kampus-catatan { grid-column: 1; }
  .kampus.punya-foto > .kampus-foto { grid-column: 2; grid-row: 1 / span 3; align-self: start; margin-top: 0; }
}
.daftar-dokumen { counter-reset: d; display: grid; gap: 8px; margin-top: 12px; }
.daftar-dokumen li { counter-increment: d; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; background: var(--putih); border: 1px solid var(--garis); }
.daftar-dokumen li::before { content: counter(d); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--emas-100); color: var(--emas-700); font-family: var(--judul); font-weight: 800; font-size: .85rem; }
.bagian-putih .daftar-dokumen li { background: var(--kertas); }
.univ-program { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ═══ v2 putaran 3 (8 Okt 2026 malam): 15 foto ChatGPT v4 + desain berseni untuk halaman layanan, galeri, sekolah, tentang, FAQ, kontak ═══ */
/* foto lebar v2: cap di sudut foto (≥760 px) + keping fakta — di komputer menempel di foto, di HP jadi baris di bawah foto */
.foto-lebar-v2 { position: relative; }
.foto-lebar-v2 .foto-lebar { position: relative; }
.foto-lebar-v2 .foto-lebar picture { height: 100%; }
.cap-foto { display: none; right: 22px; top: 18px; z-index: 3; transform: rotate(6deg); }
.foto-keping { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.foto-keping li { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 13px; border-radius: 999px; background: var(--putih);
                  border: 1px solid var(--garis); color: var(--giok-800); font-size: .84rem; font-weight: 600; line-height: 1.3; }
.foto-keping .ikon { width: 15px; height: 15px; color: var(--giok-600); flex-shrink: 0; }
@media (min-width: 760px) {
  .cap-foto { display: grid; }
  .foto-keping { position: absolute; left: 16px; right: 16px; bottom: 16px; margin-top: 0; z-index: 2; }
  .foto-keping li { background: rgba(255, 255, 255, .93); border-color: transparent; box-shadow: var(--bayang); }
}

/* foto berlabel (3:2) — dipakai di FAQ, Kontak, Tentang, D3, beranda, Pusat Persiapan */
.foto-label { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--kertas-2); box-shadow: var(--bayang); margin: 0; }
.foto-label picture { height: 100%; }
.foto-label img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-label figcaption { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 4px 9px; border-radius: 8px; background: rgba(16, 32, 26, .78);
                         color: #fff; font-size: .76rem; font-weight: 600; line-height: 1.35; }
.faq-foto { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-bottom: 26px; }
@media (max-width: 479px) { .faq-foto { grid-template-columns: 1fr; } }
.faq-item { border-left: 4px solid transparent; transition: border-color .18s ease; }
.faq-item[open] { border-left-color: var(--emas); }
.tahap-foto { margin-top: 4px; }
/* 9 Okt 2026 (Rifal: kartu Tahun 1–2 tampak kosong karena satu kartu memuat foto) → foto magang jadi bidang lebar di bawah 4 kartu */
.tahap-foto-lebar { margin-top: 18px; aspect-ratio: 21 / 9; max-height: 420px; width: 100%; }
@media (max-width: 759px) { .tahap-foto-lebar { aspect-ratio: 3 / 2; } }
.judul-bagian-dalam { margin-bottom: 0; }
.jarak-bawah-28 { margin-bottom: 28px; }

/* rute lintas layanan (halaman Layanan): lima perhentian bernomor emas, tersambung garis putus-putus */
.rute-layanan { counter-reset: rl; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.rute-layanan li { counter-increment: rl; position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 14px 14px 12px;
                   background: var(--putih); border: 1px solid var(--garis); border-radius: 16px; }
.rute-layanan li::before { content: counter(rl); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--emas-100); color: var(--emas-700);
                           border: 2px solid var(--emas); font-family: var(--judul); font-weight: 800; font-size: 1rem; }
.rute-layanan b { display: block; font-family: var(--judul); font-size: 1.04rem; line-height: 1.3; }
.rute-layanan small { display: block; margin-top: 4px; font-size: .95rem; color: var(--tinta-2); line-height: 1.55; }
.rute-layanan small a { color: var(--giok-700); font-weight: 600; }
.rute-layanan li + li::after { content: ''; position: absolute; left: 31px; top: -15px; height: 14px; border-left: 2px dashed var(--emas); }
@media (min-width: 900px) {
  .rute-layanan { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .rute-layanan li { grid-template-columns: 1fr; padding: 16px 16px 18px; }
  .rute-layanan li + li::after { left: -15px; top: 35px; height: 0; width: 14px; border-left: 0; border-top: 2px dashed var(--emas); }
}

/* galeri v2: navigasi rubrik + kotak cahaya (dialog bawaan peramban) */
.rubrik-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.rubrik-nav a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--garis-2); background: var(--putih);
                color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .95rem; }
.rubrik-nav a:hover { border-color: var(--giok-500); color: var(--giok-700); }
.rubrik-nav .ikon { width: 16px; height: 16px; color: var(--giok-600); }
.galeri-rubrik { scroll-margin-top: calc(var(--tinggi-kepala) + 16px); }
@media (min-width: 760px) { #video.galeri-rubrik { scroll-margin-top: calc(var(--tinggi-kepala) + 84px); } }   /* pil rubrik tetap terlihat di bawah kepala saat melompat ke rubrik pertama (uji 9 Okt: pil tertutup kepala lengket) */
.galeri-buka { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; font: inherit; }
.galeri-buka picture { height: 100%; }
.galeri-buka:focus-visible { outline: 3px solid var(--daun); outline-offset: -3px; }
.kotak-cahaya { width: min(96vw, 1280px); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.kotak-cahaya::backdrop { background: rgba(7, 30, 22, .94); }
.kotak-cahaya figure { margin: 0; display: grid; justify-items: center; gap: 10px; }
.kotak-cahaya img { max-width: 100%; max-height: 80vh; width: auto; height: auto; border-radius: 12px; background: #000; }
.kotak-cahaya figcaption { color: #fff; font-size: .95rem; line-height: 1.5; text-align: center; padding: 0 60px; }
.kotak-cahaya-tombol { position: fixed; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0;
                       background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; }
.kotak-cahaya-tombol:hover { background: rgba(255, 255, 255, .3); }
.kotak-cahaya-tombol:focus-visible { outline: 3px solid var(--daun); }
.kotak-cahaya-tombol .ikon { width: 22px; height: 22px; }
.kotak-cahaya-sebelum { left: 10px; }
.kotak-cahaya-sesudah { right: 10px; }
.kotak-cahaya-tutup { top: 14px; right: 14px; transform: none; }

/* orang: foto asli (tim) menggantikan ikon bila ada */
.orang-foto { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--kertas-2); border: 3px solid var(--emas-100); }
.orang-foto picture { height: 100%; }
.orang-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* sentuhan emas: legalitas, ringkasan study tour, kartu layanan sekolah */
.legalitas div { border-top: 4px solid var(--emas); }
.ringkas-tur > div { border-top: 4px solid var(--emas); }
.layanan .layanan-nomor { color: var(--emas); }

/* putaran 4b (9 Okt 2026, dari uji penutup): keterangan foto galeri tidak menghalangi klik tombol perbesar; tabel gulir bisa difokus kibor */
.galeri-item figcaption { pointer-events: none; }
.tabel-gulir:focus-visible { outline: 3px solid var(--daun); outline-offset: 2px; }

/* 9 Okt 2026 10.15 — masukan Rifal: logo cap di tiket, logo mitra, flyer Kerja di Jepang */
.tiket-cap { overflow: hidden; background: #fff; }
.tiket-cap img { display: block; width: 100%; height: 100%; object-fit: cover; }
.logo-mitra { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--garis); }
.logo-mitra-judul { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 12px; }
.logo-mitra ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.logo-mitra li { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--tinta-2); }
.logo-mitra img { height: 48px; width: auto; border-radius: 8px; background: #fff; padding: 3px; border: 1px solid var(--garis); }
.logo-mitra-teks span { padding: 8px 12px; border: 1px dashed var(--garis-2); border-radius: 999px; }
.galeri-flyer { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
/* ubin flyer: bukan ubin galeri 3:2 — gambar utuh, keterangan di BAWAH gambar (bisa diklik: tautan Unduh) */
.galeri-flyer .flyer-item { margin: 0; aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; }
.galeri-flyer .flyer-item picture { height: auto; }
.galeri-flyer .flyer-item figcaption { position: static; padding: 0; background: none; color: var(--tinta-2); pointer-events: auto; text-shadow: none; }
.galeri-flyer .galeri-buka picture, .galeri-flyer .galeri-buka img { width: 100%; height: auto; display: block; border-radius: var(--r2); border: 1px solid var(--garis); background: #fff; }
.galeri-flyer figcaption { font-size: .86rem; color: var(--tinta-2); margin-top: 8px; line-height: 1.5; }
.galeri-flyer figcaption a { font-weight: 700; color: var(--giok-700); text-decoration: underline; text-underline-offset: 3px; }

/* ── Halaman per kampus (Tahap 2, 9 Okt 2026) ── */
.kampus-aksi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.rumpun-blok + .rumpun-blok { margin-top: 26px; }
.rumpun-judul { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; color: var(--giok-700); }
.rumpun-judul .ikon { width: 16px; height: 16px; }
.rumpun-blok .jurusan { margin-top: 12px; }
.dokumen-daftar { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.dokumen-daftar li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r2); background: var(--kertas); border: 1px solid var(--garis); font-size: 1rem; }
.dokumen-nomor { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--emas-100, #FBF1D6); color: #6B4F0C; }
.galeri-kampus-kecil { align-self: start; }

/* ── Agenda & pendaftaran (Tahap 2) ── */
.grid-agenda { list-style: none; margin: 0; padding: 0; }
.agenda { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: var(--r3); background: var(--putih); border: 1px solid var(--garis); }
.agenda-atas { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.agenda h3 { font-size: 1.06rem; line-height: 1.35; }
.agenda p { color: var(--tinta-2); font-size: .98rem; }
.agenda-status, .agenda-tanggal { display: inline-flex; padding: 4px 11px; border-radius: 999px; font-size: .8rem; font-weight: 700; text-align: right; }
.agenda-hijau { background: var(--giok-50); color: var(--giok-700); }
.agenda-emas { background: #FBF1D6; color: #6B4F0C; }
.agenda-abu { background: var(--kertas-2); color: var(--tinta-2); }
.agenda-tanggal { background: var(--merah-100); color: #8E241D; }
.agenda-tempat { display: flex; gap: 6px; align-items: flex-start; font-size: .88rem !important; color: var(--tinta-3) !important; }
.agenda-tempat .ikon { width: 15px; height: 15px; margin-top: 3px; flex-shrink: 0; }
.agenda .tautan-panah { margin-top: auto; padding-top: 6px; }

/* ═══ TAMPILAN HIDUP (Tahap 2, 9 Okt 2026 — disetujui Rifal: "terbaik, termahal, tertinggi") ═══
   Semua gerak hanya bila JS hidup (html.js) DAN pengguna tidak memilih "kurangi gerak". Tanpa JS: semua tampil diam & utuh.
   Hero: teks naik cepat (tidak menunda tampil pertama), foto bernapas (Ken Burns), cap tertempel, pil melayang.
   Isi: anak grid muncul bergiliran (--i dari JS), foto bergeser halus saat digulir (--ty dari JS), garis boarding pass menggambar sendiri,
   kartu timbul saat disorot, bilah kemajuan gulir di atas, motif kisi bergeser perlahan. */
@media (prefers-reduced-motion: no-preference) {
  html.js .gulir-progres { position: fixed; top: 0; left: 0; z-index: 1200; width: 100%; height: 3px; pointer-events: none;
    background: linear-gradient(90deg, var(--giok-600), var(--emas)); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }

  /* hero: masuk bertahap — h1 tanpa jeda supaya tampil pertama tetap cepat */
  /* 10 Okt 2026: hero hanya BERGESER masuk, tidak mulai transparan — foto & judul langsung terhitung tampil (LCP 3,4 dtk → cepat) */
  @keyframes hidup-naik { from { transform: translateY(18px); } to { transform: none; } }
  @keyframes hidup-masuk-kanan { from { transform: translateX(26px) scale(.985); } to { transform: none; } }
  @keyframes hidup-cap { 0% { opacity: 0; transform: rotate(-26deg) scale(1.7); } 70% { opacity: 1; transform: rotate(-6deg) scale(.96); } 100% { opacity: 1; transform: rotate(-8deg) scale(1); } }
  @keyframes hidup-napas { from { transform: scale(1); } to { transform: scale(1.06); } }
  @keyframes hidup-melayang { from { transform: translateY(0); } to { transform: translateY(-5px); } }
  @keyframes hidup-kisi { from { background-position: 0 0; } to { background-position: 60px 60px; } }
  html.js .hero .hero-teks > * { animation: hidup-naik .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 80ms); }
  html.js .hero .hero-teks > h1 { animation-delay: 0s; }
  html.js .hero .tumpuk, html.js .hero .foto-lebar-v2, html.js .hero > .wadah > figure { animation: hidup-masuk-kanan .8s cubic-bezier(.2, .7, .2, 1) .15s both; }
  html.js .hero .cap-hero { animation: hidup-cap .7s cubic-bezier(.2, .7, .2, 1) .9s both; }
  html.js .tumpuk-utama .putar-slide.aktif img { animation: hidup-napas 9s ease-out both; }
  html.js .hero-sorot span { animation: hidup-melayang 3.6s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.2s); }
  html.js .motif-kisi::after { animation: hidup-kisi 50s linear infinite; }

  /* anak grid muncul bergiliran */
  html.js .hidup-anak { opacity: 0; transform: translateY(16px); transition: opacity .65s cubic-bezier(.2, .7, .2, 1), transform .65s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i, 0) * 70ms); }
  html.js .hidup-anak.tampak { opacity: 1; transform: none; }
  html.js .muncul { transition-delay: calc(var(--i, 0) * 70ms); }

  /* foto: sedikit lebih besar lalu tenang saat muncul; bidang lebar bergeser halus mengikuti gulir */
  html.js .hidup-anak picture img, html.js .muncul picture img { transform: scale(1.06); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
  html.js .hidup-anak.tampak picture img, html.js .muncul.tampak picture img { transform: none; }
  html.js .hidup-geser img { transform: translateY(var(--ty, 0px)) scale(1.1); will-change: transform; }

  /* boarding pass: garis menggambar sendiri, perhentian menyala berurutan */
  html.js .tiket .rute::before { transform: scaleY(0); transform-origin: 50% 0; transition: transform 1.8s cubic-bezier(.2, .7, .2, 1) .25s; }
  html.js .tiket.tampak .rute::before { transform: none; }
  html.js .tiket .rute-titik::before { transform: scale(.4); opacity: 0; transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .45s; transition-delay: calc(.3s + var(--i, 0) * .32s); }
  html.js .tiket.tampak .rute-titik::before { transform: none; opacity: 1; }

  /* angka: garis emas tumbuh */
  html.js .angka b::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s cubic-bezier(.2, .7, .2, 1) .35s; }
  html.js .angka.tampak b::after, html.js .angka.hidup-anak.tampak b::after { transform: none; }

  /* kartu timbul saat disorot */
  html.js .kartu-jalur, html.js .tahap, html.js .ekosistem, html.js .testi, html.js .sasaran, html.js .pilar, html.js .sub-layanan article,
  html.js .kartu-kontak, html.js .kartu-untuk, html.js .galeri-item, html.js .flyer-item { transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease, border-color .28s ease; }
  html.js .kartu-jalur:hover, html.js .tahap:hover, html.js .ekosistem:hover, html.js .testi:hover, html.js .sasaran:hover, html.js .pilar:hover,
  html.js .sub-layanan article:hover, html.js .kartu-kontak:hover, html.js .kartu-untuk:hover { transform: translateY(-4px); box-shadow: var(--bayang); }
  html.js .galeri-item:hover, html.js .flyer-item:hover { transform: translateY(-3px); }

  /* kotak cahaya: masuk dengan pembesaran halus */
  @keyframes hidup-zoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
  html.js .kotak-cahaya[open] figure { animation: hidup-zoom .28s cubic-bezier(.2, .7, .2, 1) both; }

  /* tombol utama: kilau tipis saat disorot */
  html.js .tombol-utama { position: relative; overflow: hidden; }
  html.js .tombol-utama::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); transition: left .55s ease; pointer-events: none; }
  html.js .tombol-utama:hover::after { left: 115%; }
}

/* Kepala HP satu baris (9 Okt 2026, tangkapan Rifal di HP ±412 px): "UOS Indonesia" 24 px pecah dua baris → kepala tinggi dan huruf atas
   menempel bilah sosial. Di bawah 640 px nama dikunci satu baris & sedikit lebih kecil; di bawah 380 px tombol Menu tinggal ikon
   (teks "Menu" tetap untuk pembaca layar). Batas 639 px: di 560–639 px tombol "Konsultasi gratis" ikut tampil dan nama pecah lagi. */
@media (max-width: 639px) {
  .kepala-isi { gap: 10px; padding-block: 6px; }
  .merek { gap: 9px; min-width: 0; }
  .merek .merek-tanda { width: 40px; height: 40px; }
  .merek-teks b { font-size: 1.14rem; line-height: 1.12; white-space: nowrap; }
  .merek-teks small { font-size: .68rem; margin-top: 3px; }
  .tombol-ikon { width: 40px; height: 40px; }
  .tombol-menu { height: 40px; padding: 0 12px; }
}
@media (max-width: 379px) {
  .tombol-menu { width: 40px; padding: 0; justify-content: center; }
  .tombol-menu span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* Utilitas jarak — sengaja PALING AKHIR supaya menang atas aturan komponen yang menyetel margin (mis. .foto-label { margin: 0 },
   tangkapan Rifal 9 Okt: foto "Hari keberangkatan" menempel ke tombol "Atau jalur S1"). */
.jarak-atas-14 { margin-top: 14px; } .jarak-atas-18 { margin-top: 18px; } .jarak-atas-20 { margin-top: 20px; } .jarak-atas-22 { margin-top: 22px; } .jarak-atas-28 { margin-top: 28px; }