/* ==========================================================================
   profil.css — halaman profil tunggal (MODE_PROFIL_SAJA)
   Memakai variabel & font dari style.css. Awalan "pf-" agar tidak bentrok.
   ========================================================================== */

html { scroll-padding-top: 84px; }

/* --- Pita informasi pengembangan --- */
.pf-info { background: var(--amber-pucat); border-bottom: 1px solid #F3DDB0; }
.pf-info-isi { display: flex; align-items: center; justify-content: center; gap: 10px; padding-block: 9px; }
.pf-info p { max-width: none; font-size: 0.86rem; color: #6B4A08; text-align: center; }
.pf-info strong { color: #6B4A08; }
.pf-info-titik { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex-shrink: 0; animation: pf-denyut 2.2s ease-in-out infinite; }
@keyframes pf-denyut { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pf-info-titik { animation: none; } }

/* --- Umum --- */
.pf-bagian { padding-block: clamp(56px, 8vw, 96px); }
.pf-dingin { background: var(--kertas-dingin); border-block: 1px solid var(--garis-tipis); }
.pf-label {
    font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--amber-tua); margin-bottom: 14px; max-width: none;
}
.pf-kepala { margin-bottom: 40px; }
.pf-kepala h2 { margin-bottom: 14px; }
.pf-sub { font-size: 1.05rem; margin-bottom: 18px; padding-bottom: 12px; border-bottom: var(--rusuk); }
.pf-dua-kolom { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 80px); align-items: start; }

/* --- Hero --- */
.pf-hero { padding-block: clamp(44px, 7vw, 88px); background: var(--gradasi-halus); border-bottom: 1px solid var(--garis-tipis); }
.pf-hero-isi { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.pf-hero h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); margin-bottom: 20px; }
.pf-hero-lead { font-size: 1.12rem; color: var(--teks); margin-bottom: 26px; }
.pf-lencana { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.pf-lencana li {
    font-size: 0.8rem; font-weight: 500; color: var(--tinta);
    padding: 6px 12px; border: 1px solid var(--garis); background: var(--kertas); border-radius: 999px;
}
.pf-tautan-panah { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; }
.pf-tautan-panah svg { transition: transform var(--transisi); }
.pf-tautan-panah:hover svg { transform: translateX(3px); }
.pf-hero-logo { justify-self: center; width: min(100%, 400px); }
.pf-hero-logo img { width: 100%; height: auto; border-radius: var(--sudut-lembut); box-shadow: var(--bayangan-kuat); border: var(--rusuk); }

/* --- Tentang --- */
.pf-dua-kolom h2 { max-width: 16ch; }

/* --- Visi --- */
.pf-visi {
    position: relative; margin: 6px 0 56px; max-width: 30em;
    font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(1.35rem, 2.7vw, 1.95rem);
    line-height: 1.4; color: var(--tinta); font-weight: 400;
}
.pf-visi-tanda { position: absolute; left: -0.62em; top: -0.12em; font-size: 2.6em; line-height: 1; color: var(--langit); opacity: .7; }

/* --- Misi --- */
.pf-misi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 5vw, 64px); }
.pf-misi li { display: flex; gap: 18px; padding: 18px 0; border-top: var(--rusuk); }
.pf-misi li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pf-no { font-family: 'Source Serif 4', serif; font-size: 1.05rem; font-weight: 600; color: var(--amber-tua); min-width: 1.8em; }
.pf-misi p { max-width: none; }

/* --- Mutu --- */
.pf-mutu { align-items: start; }
.pf-komitmen li { position: relative; padding: 0 0 14px 22px; }
.pf-komitmen li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 2px; background: var(--amber); }

.pf-dasar { margin-top: 28px; border: var(--rusuk); border-radius: var(--sudut); background: var(--kertas); }
.pf-dasar summary { cursor: pointer; padding: 14px 18px; font-weight: 600; color: var(--tinta); font-size: 0.93rem; list-style: none; display: flex; justify-content: space-between; }
.pf-dasar summary::-webkit-details-marker { display: none; }
.pf-dasar summary::after { content: "+"; font-size: 1.2rem; line-height: 1; color: var(--amber-tua); }
.pf-dasar[open] summary::after { content: "−"; }
.pf-dasar ul { padding: 4px 18px 16px; }
.pf-dasar li { font-size: 0.88rem; color: var(--teks-redup); padding: 8px 0; border-top: 1px solid var(--garis-tipis); }

/* Sasaran mutu ala buku besar */
.pf-buku li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 0; border-top: var(--rusuk); }
.pf-buku li:last-child { border-bottom: var(--rusuk); }
.pf-angka { display: flex; flex-direction: column; text-align: right; line-height: 1.15; }
.pf-angka b { font-family: 'Source Serif 4', serif; font-size: 1.7rem; color: var(--tinta); font-weight: 600; }
.pf-angka small { font-size: 0.7rem; color: var(--teks-redup); }
.pf-buku p { max-width: none; font-size: 0.95rem; }

/* --- Segera hadir --- */
.pf-segera { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pf-segera li { background: var(--kertas); border: 1px dashed #C9D5E1; border-radius: var(--sudut-lembut); padding: 22px; }
.pf-segera-tag {
    display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--amber-tua); background: var(--amber-pucat); padding: 3px 9px; border-radius: 999px; margin-bottom: 12px;
}
.pf-segera h4 { margin-bottom: 6px; font-family: 'Source Serif 4', serif; font-size: 1.08rem; }
.pf-segera p { font-size: 0.9rem; color: var(--teks-redup); }

/* --- Kontak --- */
.pf-kontak div { padding: 16px 0; border-top: var(--rusuk); }
.pf-kontak div:last-child { border-bottom: var(--rusuk); }
.pf-kontak dt { font-size: 0.74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--teks-redup); margin-bottom: 4px; }
.pf-kontak dd { font-size: 1.05rem; color: var(--tinta); overflow-wrap: anywhere; }

.pf-kaki .kaki-bawah-isi { padding-block: 22px; }

/* --- Responsif --- */
@media (max-width: 900px) {
    .pf-dua-kolom, .pf-hero-isi { grid-template-columns: 1fr; }
    .pf-hero-logo { order: -1; width: min(60%, 240px); justify-self: start; }
    .pf-segera { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-dua-kolom h2 { max-width: none; }
}
@media (max-width: 640px) {
    .pf-misi, .pf-segera { grid-template-columns: 1fr; }
    .pf-buku li { grid-template-columns: 78px minmax(0, 1fr); }
    .pf-visi-tanda { position: static; display: block; margin-bottom: -.5em; }
    .pf-info p { text-align: left; }
}

/* --- Semua paragraf rata kiri-kanan (justify) --- */
p, .pf-info p, .pf-hero-lead, .pf-buku p, .pf-misi p, .pf-segera p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}
@media (max-width: 640px) { .pf-info p { text-align: justify; } }