/* ============================================================
KURSUS PINTAR — iso.css
Gaya khusus landing page Pelatihan ISO & PSE (/pelatihan-iso-pse).
Dimuat BERSAMA ai.css (kelas .ai-* dipakai ulang), hanya di
halaman itu — lihat render_head di includes/layout.php.
Semua kelas baru diawali .iso- agar tidak bentrok.
Token warna mengikuti main.css: --navy --blue --gold dst.
============================================================ */
/* ── Hero: daftar ringkas 7 fasilitas di kartu kanan ────── */
.iso-mini { list-style: none; margin: 4px 0 22px; display: grid; gap: 2px; counter-reset: iso; }
.iso-mini li {
counter-increment: iso;
display: flex; align-items: center; gap: 10px;
font-size: .88rem; color: rgba(255,255,255,.82); line-height: 1.45;
padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.1);
}
.iso-mini li:last-child { border-bottom: none; }
.iso-mini li span {
width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.08); font-size: .95rem;
}
/* ── Bar angka: isi berupa teks, jadi huruf sedikit dikecilkan ── */
.iso-stats .stat-num { font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
/* ── 7 fasilitas ─────────────────────────────────────────── */
/* Flex + wrap supaya baris terakhir (3 kartu) tetap di tengah. */
.iso-fas-grid {
display: flex; flex-wrap: wrap; justify-content: center; gap: 18px;
max-width: 1180px; margin: 0 auto;
}
.iso-fas-card {
flex: 0 1 calc((100% - 54px) / 4);
min-width: 0;
background: #fff; border: 1.5px solid var(--border); border-radius: var(--r);
padding: 24px; transition: all var(--trans);
display: flex; flex-direction: column;
}
.iso-fas-card:hover { box-shadow: var(--shadow); border-color: var(--blue); transform: translateY(-3px); }
.iso-fas-top { display: flex; align-items: flex-start; justify-content: space-between; }
.iso-fas-top .feat-icon { margin-bottom: 14px; }
.iso-fas-no {
font-family: var(--serif); font-size: 1.6rem; line-height: 1;
color: var(--border);
}
.iso-fas-card:hover .iso-fas-no { color: var(--gold); }
.iso-fas-card h4 { font-family: var(--font); font-size: .98rem; font-weight: 700; color: var(--text); margin-bottom: 8px; line-height: 1.4; }
.iso-fas-card p { font-size: .84rem; color: var(--muted); line-height: 1.7; }
/* ── Program ISO & PSE ───────────────────────────────────── */
.iso-prog { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1080px; margin: 0 auto; }
.iso-prog-card {
background: #fff; border: 1.5px solid var(--border); border-radius: var(--r-lg);
padding: 28px; display: flex; flex-direction: column;
border-top: 4px solid var(--blue);
scroll-margin-top: 84px;
}
.iso-prog-card.is-gold { border-top-color: var(--gold); }
.iso-prog-head { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; }
.iso-prog-kode {
flex-shrink: 0; min-width: 58px; height: 58px; padding: 0 10px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 1rem; letter-spacing: .04em;
background: #EEF4FF; color: var(--blue);
}
.is-gold .iso-prog-kode { background: #FFF3DC; color: #7c4f00; }
.iso-prog-head h3 { font-family: var(--font); font-size: 1.12rem; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.iso-prog-ket { font-size: .82rem; color: var(--muted); }
.iso-prog-list { list-style: none; display: grid; gap: 0; margin-bottom: 20px; }
.iso-prog-list li {
display: grid; grid-template-columns: 112px 1fr; gap: 12px;
padding: 11px 0; border-bottom: 1px solid var(--border);
font-size: .86rem; line-height: 1.55;
}
.iso-prog-list li:last-child { border-bottom: none; }
.iso-prog-list b { color: var(--text); font-weight: 700; }
.iso-prog-list span { color: var(--muted); }
.iso-prog-level { background: var(--off); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; margin-top: auto; }
.iso-prog-level-lbl { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 9px; }
.iso-prog-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.iso-prog-tags span {
font-size: .76rem; font-weight: 600; color: var(--text);
background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px;
}
.iso-prog-cta {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-size: .86rem; font-weight: 700; color: var(--blue);
border: 1.5px solid var(--blue); border-radius: var(--r); padding: 10px 16px;
text-decoration: none; transition: all var(--trans);
}
.iso-prog-cta:hover { background: var(--blue); color: #fff; }
.is-gold .iso-prog-cta { color: #7c4f00; border-color: var(--gold); }
.is-gold .iso-prog-cta:hover { background: var(--gold); color: var(--navy); }
.iso-note { max-width: 720px; margin: 26px auto 0; text-align: center; font-size: .84rem; color: var(--muted); line-height: 1.7; }
/* ── Alur kerja sama ─────────────────────────────────────── */
.iso-alur {
list-style: none; max-width: 1080px; margin: 0 auto;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.iso-alur-step {
position: relative;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
border-radius: var(--r); padding: 22px 22px 22px 70px; min-height: 100%;
}
.iso-alur-no {
position: absolute; left: 20px; top: 20px;
width: 36px; height: 36px; border-radius: 50%;
background: var(--gold); color: var(--navy);
font-weight: 800; font-size: .92rem;
display: flex; align-items: center; justify-content: center;
}
.iso-alur-step b { display: block; color: #fff; font-size: .98rem; margin-bottom: 5px; }
.iso-alur-ket { display: block; font-size: .84rem; color: rgba(255,255,255,.6); line-height: 1.65; }
/* ── Formulir penawaran ──────────────────────────────────── */
.iso-prop { max-width: 1000px; grid-template-columns: .9fr 1.1fr; }
.iso-prop .ai-prop-info li::before { content: '✓'; color: var(--gold); font-weight: 800; }
.iso-prop-wa { margin-top: 8px; }
.iso-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.iso-opt { font-weight: 400; color: var(--muted); }
.ai-field textarea {
width: 100%; font-family: var(--font); font-size: .9rem; color: var(--text);
padding: 11px 13px; border: 1.5px solid var(--border); border-radius: 10px;
background: #fff; resize: vertical; min-height: 84px; line-height: 1.55;
transition: border-color var(--trans);
}
.ai-field textarea:focus { outline: none; border-color: var(--blue); }
.iso-radio { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.iso-radio label { margin: 0; cursor: pointer; position: relative; }
/* Radio asli disembunyikan DI DALAM label (bukan terlempar ke luar
halaman — itu yang bikin halaman bisa digeser ke samping). */
.iso-radio input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.iso-radio span {
display: block; text-align: center;
font-size: .82rem; font-weight: 600; color: var(--text);
padding: 10px 8px; border: 1.5px solid var(--border); border-radius: 10px;
transition: all var(--trans);
}
.iso-radio label:hover span { border-color: var(--blue); }
.iso-radio input:checked + span { border-color: var(--blue); background: #EEF4FF; color: var(--blue); }
.iso-radio input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.iso-ok-ico {
width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
background: #ECFDF5; color: #059669; font-size: 1.6rem; font-weight: 800;
display: flex; align-items: center; justify-content: center;
}
/* ── CTA penutup: dua tombol berdampingan ────────────────── */
.iso-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }
.iso-cta-btns .cta-btn { margin: 0; }
/* ── Responsif ───────────────────────────────────────────── */
@media (max-width: 1100px) {
.iso-fas-card { flex-basis: calc((100% - 36px) / 3); }
}
@media (max-width: 1024px) {
.iso-prog { grid-template-columns: 1fr; }
.iso-alur { grid-template-columns: repeat(2, 1fr); }
.iso-prop { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.iso-fas-card { flex-basis: calc((100% - 18px) / 2); }
.iso-prog-card { padding: 22px 18px; }
.iso-prog-list li { grid-template-columns: 1fr; gap: 2px; }
.iso-alur { grid-template-columns: 1fr; }
.iso-row { grid-template-columns: 1fr; gap: 0; }
.iso-cta-btns .btn-lg { width: 100%; justify-content: center; }
}
@media (max-width: 520px) {
.iso-fas-card { flex-basis: 100%; }
}
/* Teks pembuka formulir: .ai-prop-form > p di ai.css tidak kena
karena ada di dalam