/* Pusat Informasi policy pages (/kebijakan-mutu, /kebijakan-privasi, /kebijakan-refund,
   /disclaimer, /pembayaran-tempo, /validasi-sertifikat).
   Scoped under .tpolicy; breadcrumb/hero/.container from assets/kelas/kelas.css (.tkls-*).
   Layout mengikuti proporsi halaman blog (assets/blog/blog.css .tblog-layout): kolom isi 1fr +
   sidebar 320px, gap 36px. Readable legal-body typography. */

.tpolicy { color: #2a3141; }

/* Layout: isi + sidebar — lebar & gap disamakan dengan .tblog-layout--single (blog.css).
   Sidebar mengisi kolom kanan sepanjang halaman; intro dan body legal mengalir menyambung
   di kolom kiri. grid-template-areas dipakai (bukan wrapper <main>) supaya di mobile kotak
   navigasi bisa naik ke bawah intro, tidak terkubur di bawah seluruh teks legal. */
.tpolicy-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    grid-template-areas:
        "intro side"
        "sep   side"
        "body  side";
    column-gap: 36px;
    padding-top: 28px; padding-bottom: 72px;
    align-items: start;
}
.tpolicy-layout > .tpolicy-intro-main { grid-area: intro; min-width: 0; }
.tpolicy-layout > .tpolicy-sep        { grid-area: sep; }
.tpolicy-layout > .tpolicy-body       { grid-area: body; min-width: 0; }
.tpolicy-layout > .tpolicy-infobox    { grid-area: side; }

/* Intro (paragraf pembuka + baris versi) */
.tpolicy-intro-main p { margin: 0 0 16px; font-size: 1.06rem; line-height: 1.78; color: #3d475c; }
.tpolicy-intro-main p:last-child { margin-bottom: 0; }
.tpolicy-intro-main .tpolicy-meta { font-size: .9rem; color: #667287; line-height: 1.7; margin-top: 18px; }

/* Pemisah intro → body: garis tipis, jarak rapat (menggantikan gap 40+40px antar band).
   Warna dinaikkan dari #e3e9f2 (kontras 1,22:1 terhadap putih — praktis tak terlihat)
   ke 1,57:1; tetap hairline 1px, bukan garis tebal. */
.tpolicy-sep { border: 0; height: 1px; background: #c3cfe2; margin: 26px 0; }

.tpolicy-infobox { border: 1px solid #004aad; border-radius: 12px; padding: 14px 14px 16px; }
.tpolicy-infobox__title { text-align: center; color: #004aad; margin: 0; padding: .2rem; font-size: 1.05rem; }
.tpolicy-infobox__sep { border: 0; height: 2px; background: #004aad; margin: 0 0 4px; }
.tpolicy-infobox__list { margin: 14px 0; padding-left: 20px; font-size: .88rem; line-height: 1.5; }
.tpolicy-infobox__list li { margin: 0 0 4px; }
.tpolicy-infobox__list a { color: #004aad; text-decoration: none; }
.tpolicy-infobox__list a:hover { text-decoration: underline; }
.tpolicy-infobox__list a[aria-current="page"] { font-weight: 700; }

/* Legal body */
.tpolicy-body { max-width: none; }
.tpolicy-body > :first-child { margin-top: 0; }
.tpolicy-body h2 { color: #004aad; font-size: 1.32rem; font-weight: 800; line-height: 1.3; margin: 32px 0 10px; }
.tpolicy-body h3 { color: #1a2b4a; font-size: 1.08rem; font-weight: 700; line-height: 1.35; margin: 22px 0 8px; }
.tpolicy-body p { margin: 0 0 14px; line-height: 1.8; color: #3d475c; }
.tpolicy-body ul, .tpolicy-body ol { margin: 0 0 16px; padding-left: 24px; line-height: 1.75; color: #3d475c; }
.tpolicy-body li { margin: 0 0 7px; }
.tpolicy-body li > strong:first-child { color: #1a2b4a; }
.tpolicy-body blockquote {
    border-left: 4px solid #004aad; background: #eef3fb; margin: 0 0 16px;
    padding: 12px 18px; border-radius: 0 8px 8px 0; color: #3d475c;
}
.tpolicy-body blockquote p { margin: 0; }
.tpolicy-body a { color: #004aad; text-decoration: underline; }
.tpolicy-body strong { color: #1a2b4a; }

/* Responsive */
@media (max-width: 900px) {
    /* Satu kolom; nav naik ke bawah intro supaya tetap terjangkau tanpa menggulir
       melewati seluruh badan teks legal. */
    .tpolicy-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "intro" "side" "sep" "body";
        padding-bottom: 48px;
    }
    .tpolicy-layout > .tpolicy-infobox { max-width: 320px; margin-top: 24px; }
}

/* Certificate verification form (/validasi-sertifikat) */
.tpolicy-verify { max-width: 560px; margin: 8px 0 26px; }
.tpolicy-verify__label { display: block; font-weight: 700; color: #004aad; margin-bottom: 10px; font-size: .95rem; }
.tpolicy-verify__row { display: flex; gap: 10px; flex-wrap: wrap; }
.tpolicy-verify__row input { flex: 1; min-width: 220px; padding: 12px 16px; border: 2px solid #004aad; border-radius: 8px; font-size: 15px; outline: none; }
.tpolicy-verify__row input:focus { border-color: #0066ff; }
.tpolicy-verify__row button { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; background: #004aad; color: #fff; border: none; border-radius: 8px; font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap; transition: background .15s ease; }
.tpolicy-verify__row button:hover { background: #00377f; }
.tpolicy-verify__hint { margin-top: 10px; font-size: .82rem; color: #6a7488; }