/* ============================================================
   PONDOK INFORMATIKA WAHDAH ISLAMIYAH SULTRA
   Master Stylesheet — Proposal Pendirian
   Versi: 1.0 | 1447 H / 2026 M
   ============================================================ */

/* ============================================================
   1. CSS VARIABLES (Design Tokens)
   ============================================================ */
:root {
    /* Brand Colors */
    --primary: #047857;
    --primary-dark: #064e3b;
    --primary-light: #10b981;
    --accent: #d97706;
    --accent-light: #fbbf24;

    /* Backgrounds */
    --bg-light: #f8fafc;
    --bg-cream: #fefcf7;
    --bg-dark: #06261d;

    /* Text */
    --text-main: #1e293b;
    --text-muted: #64748b;

    /* Borders & Lines */
    --border-color: #e2e8f0;

    /* Radii */
    --radius: 14px;
    --radius-sm: 8px;
    --radius-lg: 20px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 30px 60px -15px rgba(0, 0, 0, 0.25);

    /* Typography */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Plus Jakarta Sans', 'Inter', sans-serif;
    --font-arabic: 'Amiri', 'Traditional Arabic', serif;

    /* Page Dimensions */
    --page-width: 210mm;
    --page-height: 297mm;
    --page-padding: 22mm 20mm;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    background: #e5e7eb;
    color: var(--text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 30px 15px;
    min-height: 100vh;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover { color: var(--primary-dark); }

/* ============================================================
   3. HALAMAN A4 (Page Container)
   ============================================================ */
.page {
    width: var(--page-width);
    min-height: var(--page-height);
    background: #ffffff;
    margin: 0 auto 30px;
    padding: var(--page-padding);
    box-shadow: var(--shadow-lg);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    page-break-after: always;
}

/* ============================================================
   4. SAMPUL / COVER PAGE
   ============================================================ */
.cover-page {
    background:
        linear-gradient(135deg,
            rgba(6, 78, 59, 0.96) 0%,
            rgba(4, 120, 87, 0.94) 55%,
            rgba(6, 38, 29, 0.98) 100%),
        radial-gradient(circle at 80% 20%,
            rgba(217, 119, 6, 0.25) 0%,
            transparent 45%);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18mm 18mm 14mm;
    position: relative;
}

.cover-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 85%, rgba(16, 185, 129, 0.18) 0%, transparent 35%),
        radial-gradient(circle at 90% 10%, rgba(251, 191, 36, 0.14) 0%, transparent 35%);
    pointer-events: none;
}

/* Ornamen geometris Islami */
.ornament-star {
    position: absolute;
    width: 320px;
    height: 320px;
    opacity: 0.06;
    pointer-events: none;
}

.ornament-star.top-right {
    top: -80px;
    right: -80px;
}

.ornament-star.bottom-left {
    bottom: -80px;
    left: -80px;
    transform: rotate(180deg);
}

/* --- Header Sampul --- */
.cover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    gap: 16px;
}

.logo-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo-box {
    width: 62px;
    height: 62px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
    transition: transform 0.25s ease;
}

.logo-box:hover { transform: scale(1.05); }

.logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.logo-box.fallback {
    font-size: 26px;
    color: var(--accent-light);
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.logo-text .org {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: #ffffff;
}

.logo-text .sub {
    font-size: 11.5px;
    color: #a7f3d0;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.doc-number {
    font-size: 11px;
    color: #a7f3d0;
    text-align: right;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.doc-number strong {
    display: block;
    font-size: 12.5px;
    color: var(--accent-light);
    font-weight: 700;
    margin-top: 2px;
}

/* --- Body Sampul --- */
.cover-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 22mm 0 10mm;
    position: relative;
    z-index: 2;
}

.cover-bismillah {
    font-family: var(--font-arabic);
    font-size: 30px;
    color: var(--accent-light);
    margin-bottom: 22px;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 12px rgba(217, 119, 6, 0.4);
}

.cover-tag {
    display: inline-block;
    background: rgba(217, 119, 6, 0.18);
    border: 1px solid var(--accent);
    color: var(--accent-light);
    padding: 7px 22px;
    border-radius: 30px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 26px;
}

.cover-divider {
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-light), transparent);
    margin: 0 auto 30px;
    border-radius: 2px;
    position: relative;
}

.cover-divider::before,
.cover-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    background: var(--accent-light);
    border-radius: 50%;
    transform: translateY(-50%);
}

.cover-divider::before { left: -14px; }
.cover-divider::after { right: -14px; }

.cover-title {
    font-family: var(--font-heading);
    font-size: 38px;
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.cover-title-sub {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    background: linear-gradient(135deg, #ffffff 0%, #a7f3d0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
}

.cover-desc {
    max-width: 520px;
    font-size: 14px;
    color: #cbd5e1;
    line-height: 1.7;
    margin-bottom: 34px;
}

.cover-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 34px;
}

.badge-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 12px;
    color: #e2e8f0;
    font-weight: 500;
    backdrop-filter: blur(8px);
}

.badge-info i {
    color: var(--primary-light);
    font-size: 13px;
}

.cover-submitter {
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 16px 34px;
    border-radius: 12px;
    margin-top: 10px;
    backdrop-filter: blur(8px);
}

.cover-submitter .label {
    font-size: 11px;
    color: #94a3b8;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.cover-submitter .name {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}

.cover-submitter .year {
    font-size: 12px;
    color: var(--accent-light);
    margin-top: 4px;
    font-weight: 600;
}

/* --- Footer Sampul --- */
.cover-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 11px;
    color: #94a3b8;
    position: relative;
    z-index: 2;
    gap: 12px;
}

.cover-footer .footer-left,
.cover-footer .footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cover-footer i {
    color: var(--accent-light);
}

/* ============================================================
   5. HEADER & FOOTER HALAMAN DALAM
   ============================================================ */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 26px;
    border-bottom: 2px solid var(--primary);
    position: relative;
    gap: 12px;
}

.page-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--accent);
}

.page-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--primary-dark);
    font-size: 13px;
}

.page-header-left .logo-mini {
    width: 30px;
    height: 30px;
    background: var(--primary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 13px;
    overflow: hidden;
    flex-shrink: 0;
}

.page-header-left .logo-mini img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.page-header-right {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.page-footer {
    position: absolute;
    bottom: 12mm;
    left: 20mm;
    right: 20mm;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10.5px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
    gap: 12px;
}

.page-footer .footer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--primary-dark);
}

.page-footer .footer-brand img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 3px;
}

.page-footer .footer-brand i { color: var(--primary); }

.page-footer .footer-page {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--primary-dark);
}

/* ============================================================
   6. TYPOGRAPHY — Section Title & Prose
   ============================================================ */
.section-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-title::before {
    content: '';
    width: 5px;
    height: 26px;
    background: linear-gradient(180deg, var(--primary), var(--primary-light));
    border-radius: 3px;
}

.section-subtitle {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 26px;
    padding-left: 17px;
    font-style: italic;
}

/* Prose — untuk konten teks panjang */
.prose p {
    font-size: 13.5px;
    line-height: 1.85;
    margin-bottom: 14px;
    text-align: justify;
    color: var(--text-main);
}

.prose .arabic {
    font-family: var(--font-arabic);
    font-size: 20px;
    text-align: right;
    color: var(--primary-dark);
    direction: rtl;
    margin: 18px 0;
    line-height: 1.9;
}

.prose strong { color: var(--primary-dark); }

.prose em { color: var(--text-muted); }

/* Blockquote */
.prose blockquote {
    border-left: 4px solid var(--accent);
    background: rgba(217, 119, 6, 0.06);
    padding: 14px 18px;
    margin: 16px 0;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--primary-dark);
}

.prose blockquote p {
    margin-bottom: 6px;
    font-size: 13px;
    text-align: left;
}

.prose blockquote cite {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    font-style: normal;
    margin-top: 6px;
}

/* ============================================================
   7. DAFTAR ISI (Table of Contents)
   ============================================================ */
.toc-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.toc-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-main);
    transition: all 0.22s ease;
    border: 1px solid transparent;
}

.toc-item:hover {
    background: linear-gradient(90deg,
        rgba(4, 120, 87, 0.06) 0%,
        rgba(16, 185, 129, 0.02) 100%);
    border-color: rgba(4, 120, 87, 0.18);
    transform: translateX(6px);
}

.toc-item:hover .toc-number {
    background: var(--primary);
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(4, 120, 87, 0.35);
}

.toc-item:hover .toc-title { color: var(--primary-dark); }

.toc-item:hover .toc-arrow {
    opacity: 1;
    transform: translateX(0);
}

.toc-number {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(4, 120, 87, 0.08);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    transition: all 0.25s ease;
    border: 1px solid rgba(4, 120, 87, 0.12);
}

.toc-content {
    flex: 1;
    min-width: 0;
}

.toc-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    color: var(--text-main);
    transition: color 0.2s ease;
    line-height: 1.3;
}

.toc-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.4;
}

.toc-meta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.toc-page-num {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12.5px;
    color: var(--text-muted);
    min-width: 32px;
    text-align: right;
}

.toc-arrow {
    color: var(--primary);
    font-size: 13px;
    opacity: 0;
    transform: translateX(-6px);
    transition: all 0.25s ease;
}

.toc-separator {
    margin: 14px 0 8px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent);
    text-transform: uppercase;
}

.toc-separator::before,
.toc-separator::after {
    content: '';
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    flex: 1;
}

/* ============================================================
   8. INFO BOX
   ============================================================ */
.info-box {
    margin-top: 26px;
    padding: 16px 20px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.05),
        rgba(16, 185, 129, 0.08));
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.info-box i {
    color: var(--primary);
    font-size: 18px;
    margin-top: 2px;
}

.info-box-content { flex: 1; }

.info-box-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    color: var(--primary-dark);
    margin-bottom: 4px;
}

.info-box-text {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.55;
}

/* ============================================================
   9. SIGNATURE BLOCK
   ============================================================ */
.signature-block {
    margin-top: 40px;
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
}

.signature-box {
    text-align: center;
    min-width: 220px;
}

.signature-box .place-date {
    font-size: 13px;
    color: var(--text-main);
    margin-bottom: 60px;
}

.signature-box .name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    color: var(--primary-dark);
    border-top: 1.5px solid var(--text-main);
    padding-top: 6px;
    display: inline-block;
    min-width: 200px;
}

.signature-box .role {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ============================================================
   10. CARD (untuk konten bab)
   ============================================================ */
.card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.card h3 {
    font-family: var(--font-heading);
    font-size: 16px;
    color: var(--primary-dark);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card p {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ============================================================
   11. LIST STYLES
   ============================================================ */
.custom-list {
    list-style: none;
}

.custom-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 9px;
    font-size: 13.5px;
    color: var(--text-main);
    line-height: 1.6;
}

.custom-list li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--primary);
    font-size: 14px;
}

/* ============================================================
   12. STAT BOX
   ============================================================ */
.stat-box {
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.05) 0%,
        rgba(16, 185, 129, 0.1) 100%);
    border: 1px solid rgba(4, 120, 87, 0.2);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: transform 0.25s ease;
}

.stat-box:hover { transform: scale(1.04); }

.stat-number {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    color: var(--primary);
}

.stat-label {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 4px;
}

/* ============================================================
   13. TABLE
   ============================================================ */
.table-custom {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.table-custom th,
.table-custom td {
    padding: 10px 14px;
    text-align: left;
}

.table-custom th {
    background: var(--primary);
    color: #ffffff;
    font-weight: 700;
    font-family: var(--font-heading);
}

.table-custom td {
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
}

.table-custom tr:nth-child(even) td {
    background: var(--bg-light);
}

.table-custom tr:last-child td { border-bottom: none; }

.table-custom .total-row td {
    background: #e6f4ea !important;
    font-weight: 700;
    font-size: 14px;
    color: var(--primary) !important;
}

/* ============================================================
   14. GRID UTILITIES
   ============================================================ */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    width: 100%;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    width: 100%;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    width: 100%;
}

/* ============================================================
   15. TIMELINE STEP
   ============================================================ */
.timeline-step {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 13px;
}

.timeline-badge {
    background: var(--primary);
    color: white;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.3);
    font-family: var(--font-heading);
}

/* ============================================================
   16. VISI CARD
   ============================================================ */
.visi-card {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
}

.visi-card h3 { color: #a7f3d0; }

/* ============================================================
   17. QUOTE BOX
   ============================================================ */
.quote-box {
    background: rgba(217, 119, 6, 0.08);
    border-left: 4px solid var(--accent);
    padding: 14px;
    border-radius: 6px;
    margin-bottom: 14px;
}

.quote-box p {
    font-style: italic;
    font-size: 13px;
    color: #78350f;
}

/* ============================================================
   18. UTILITY CLASSES
   ============================================================ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); }
.text-primary { color: var(--primary); }
.text-accent { color: var(--accent); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }

.hidden { display: none; }

/* Print & Screen helper */
.no-print { /* Sembunyikan saat print */ }
.only-print { display: none; }

/* ============================================================
   19. RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    body { padding: 14px 8px; }

    .page {
        width: 100%;
        min-height: auto;
        padding: 26px 20px;
        border-radius: 8px;
        margin-bottom: 16px;
    }

    .cover-page { padding: 22px 20px 18px; }
    .cover-title { font-size: 26px; }
    .cover-title-sub { font-size: 17px; }
    .cover-bismillah { font-size: 22px; }
    .cover-header { flex-direction: column; gap: 12px; align-items: flex-start; }
    .doc-number { text-align: left; }

    .toc-item { padding: 10px 12px; gap: 10px; }
    .toc-number { width: 36px; height: 36px; font-size: 12px; }
    .toc-title { font-size: 13px; }
    .toc-desc { display: none; }

    .page-header { flex-direction: column; align-items: flex-start; gap: 6px; }
    .page-footer { position: static; margin-top: 22px; }

    .grid-2,
    .grid-3,
    .grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .cover-title { font-size: 21px; }
    .cover-title-sub { font-size: 15px; }
    .cover-badges { flex-direction: column; align-items: center; }
    .toc-meta { gap: 6px; }
    .toc-page-num { min-width: 24px; font-size: 11px; }
    .section-title { font-size: 18px; }
    .table-custom { font-size: 11px; }
    .table-custom th,
    .table-custom td { padding: 7px 8px; }
}

/* ============================================================
   20. PRINT
   ============================================================ */
@media print {
    @page {
        size: A4;
        margin: 0;
    }

    body {
        background: white;
        padding: 0;
        margin: 0;
    }

    .page {
        box-shadow: none;
        margin: 0;
        border-radius: 0;
        page-break-after: always;
        width: 210mm;
        min-height: 297mm;
    }

    .cover-page { page-break-after: always; }

    .toc-item { break-inside: avoid; }
    .toc-item:hover { background: none; transform: none; }
    .toc-arrow { display: none; }

    .no-print { display: none !important; }
    .only-print { display: block !important; }

    a {
        color: var(--text-main);
        text-decoration: none;
    }

    /* Hindari pemisahan tabel & card di tengah halaman */
    .card,
    .table-custom,
    .timeline-step,
    .stat-box,
    .info-box,
    .quote-box { break-inside: avoid; }

    h1, h2, h3, h4 { break-after: avoid; }
}

/* ============================================================
   21. PREFERS REDUCED MOTION (Accessibility)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   22. DARK MODE (Opsional — jika browser pengguna dark mode)
   ============================================================ */
@media (prefers-color-scheme: dark) {
    /* Biarkan default; dokumen tetap putih karena ini dokumen cetak */
    /* Jika ingin dark mode untuk tampilan web, aktifkan kode berikut: */
    /*
    body {
        background: #0f172a;
    }
    .page {
        background: #1e293b;
        color: #e2e8f0;
    }
    */
}

/* ============================================================
   23. CHAPTER OPENER (untuk pembuka bab)
   ============================================================ */
.chapter-opener {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px 26px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.06) 0%,
        rgba(16, 185, 129, 0.04) 100%);
    border-left: 6px solid var(--primary);
    border-radius: 12px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}

.chapter-opener::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(217, 119, 6, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.chapter-badge {
    flex-shrink: 0;
    width: 78px;
    height: 78px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(4, 120, 87, 0.3);
    position: relative;
}

.chapter-badge::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
}

.chapter-num {
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1;
}

.chapter-info { flex: 1; }

.chapter-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.chapter-title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 800;
    color: var(--primary-dark);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.chapter-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 620px;
}

/* ============================================================
   24. SUBSECTION TITLE
   ============================================================ */
.subsection-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-dark);
    margin: 22px 0 10px;
    padding-left: 14px;
    position: relative;
    line-height: 1.4;
}

.subsection-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: linear-gradient(180deg, var(--primary), var(--primary-light));
    border-radius: 2px;
}

/* ============================================================
   25. QURAN & HADITH BLOCKS
   ============================================================ */
.quran-block {
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.04) 0%,
        rgba(16, 185, 129, 0.02) 100%);
    border: 1px solid rgba(4, 120, 87, 0.15);
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 16px;
    position: relative;
}

.quran-block::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary), var(--primary-light));
    border-radius: 12px 0 0 12px;
}

.quran-label {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    background: var(--primary);
    padding: 3px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
    letter-spacing: 0.04em;
}

.quran-arabic {
    font-family: var(--font-arabic);
    font-size: 22px;
    color: var(--primary-dark);
    direction: rtl;
    text-align: right;
    line-height: 1.9;
    margin-bottom: 12px;
}

.quran-translation {
    font-size: 13px;
    color: var(--text-main);
    line-height: 1.7;
    font-style: italic;
    padding-left: 12px;
    border-left: 2px solid rgba(4, 120, 87, 0.2);
}

.quran-note {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(217, 119, 6, 0.08);
    border-radius: 8px;
    font-size: 12px;
    color: #78350f;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: 1.55;
}

.quran-note i {
    color: var(--accent);
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Hadith Block */
.hadith-block {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.hadith-number {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(217, 119, 6, 0.1);
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hadith-text {
    font-size: 13.5px;
    color: var(--text-main);
    line-height: 1.75;
    font-style: italic;
    margin-bottom: 8px;
}

.hadith-source {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    text-align: right;
}

/* ============================================================
   26. NUMBERED LIST (Custom)
   ============================================================ */
.custom-number-list {
    list-style: none;
    counter-reset: numlist;
    padding-left: 0;
}

.custom-number-list li {
    position: relative;
    padding-left: 42px;
    margin-bottom: 10px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-main);
    counter-increment: numlist;
}

.custom-number-list li::before {
    content: counter(numlist);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    box-shadow: 0 3px 8px rgba(4, 120, 87, 0.25);
}

/* ============================================================
   27. SUMMARY GRID (Ringkasan Bab)
   ============================================================ */
.summary-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.summary-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.summary-item:hover {
    transform: translateX(6px);
    box-shadow: var(--shadow-md);
    border-color: rgba(4, 120, 87, 0.25);
}

.summary-num {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.25);
}

.summary-content { flex: 1; }

.summary-title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 3px;
}

.summary-desc {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.55;
}

/* ============================================================
   28. CHAPTER NAVIGATION (Navigasi antar bab)
   ============================================================ */
.chapter-nav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-main);
    transition: all 0.22s ease;
    min-width: 200px;
    box-shadow: var(--shadow-sm);
}

.nav-link:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--primary-dark);
}

.nav-link i {
    color: var(--primary);
    font-size: 16px;
    flex-shrink: 0;
}

.nav-link.nav-next { text-align: right; }
.nav-link.nav-next > div { flex: 1; }

.nav-link .nav-label {
    display: block;
    font-size: 10.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 2px;
}

.nav-link .nav-title {
    display: block;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
}

/* Responsif untuk chapter-opener & navigation */
@media (max-width: 900px) {
    .chapter-opener {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }
    .chapter-badge { width: 64px; height: 64px; }
    .chapter-num { font-size: 26px; }
    .chapter-title { font-size: 22px; }
    .chapter-nav { flex-direction: column; }
    .nav-link { width: 100%; }
    .quran-arabic { font-size: 18px; }
}

/* ============================================================
   29. IDENTITY TABLE (2.1 Identitas Lembaga)
   ============================================================ */
.identity-table th {
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.08) 0%,
        rgba(16, 185, 129, 0.05) 100%) !important;
    color: var(--primary-dark) !important;
    font-weight: 700;
    font-size: 12.5px;
    vertical-align: top;
    font-family: var(--font-heading);
    border-bottom: 1px solid var(--border-color);
}

.identity-table td {
    font-size: 13px;
    color: var(--text-main);
    font-weight: 500;
    line-height: 1.55;
}

.identity-table tr:hover td {
    background: rgba(4, 120, 87, 0.02);
}

/* ============================================================
   30. VISION BLOCK (2.2 Visi)
   ============================================================ */
.vision-block {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    padding: 24px 26px;
    background: linear-gradient(135deg,
        var(--primary) 0%,
        var(--primary-dark) 100%);
    border-radius: 14px;
    box-shadow: 0 12px 24px -8px rgba(4, 120, 87, 0.35);
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
}

.vision-block::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.vision-icon {
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--accent-light);
    backdrop-filter: blur(8px);
    position: relative;
    z-index: 1;
}

.vision-content {
    position: relative;
    z-index: 1;
    flex: 1;
}

.vision-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--accent-light);
    margin-bottom: 8px;
}

.vision-text {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.55;
    letter-spacing: -0.005em;
}

/* ============================================================
   31. VISION BREAKDOWN (Penjabaran Visi)
   ============================================================ */
.vision-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.breakdown-item {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 10px 16px;
    background: var(--bg-light);
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    transition: all 0.22s ease;
}

.breakdown-item:hover {
    background: linear-gradient(90deg, rgba(4, 120, 87, 0.06), transparent);
    transform: translateX(6px);
}

.breakdown-num {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    background: var(--primary);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
}

.breakdown-content { flex: 1; }

.breakdown-title {
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1.3;
}

.breakdown-desc {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 2px;
}

/* ============================================================
   32. MISSION LIST (2.3 Misi)
   ============================================================ */
.mission-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mission-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 18px 22px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.mission-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary), var(--primary-light));
}

.mission-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(4, 120, 87, 0.25);
}

.mission-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.1) 0%,
        rgba(16, 185, 129, 0.15) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--primary);
}

.mission-content { flex: 1; }

.mission-num {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.mission-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 5px;
    line-height: 1.3;
}

.mission-desc {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ============================================================
   33. VALUES GRID (2.4 Nilai Dasar)
   ============================================================ */
.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.value-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.value-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at top right,
        rgba(217, 119, 6, 0.08) 0%,
        transparent 70%);
    pointer-events: none;
}

.value-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(4, 120, 87, 0.25);
}

.value-card:last-child:nth-child(odd) {
    grid-column: span 2;
}

.value-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 10px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.25);
}

.value-name {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 6px;
    letter-spacing: -0.005em;
}

.value-desc {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.6;
}

.value-desc em {
    font-size: 11.5px;
    color: var(--accent);
    font-style: italic;
    display: block;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px dashed rgba(217, 119, 6, 0.3);
}

/* ============================================================
   34. GRADUATE PROFILES (2.5 Target Lulusan)
   ============================================================ */
.graduate-profiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.profile-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.profile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.profile-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(4, 120, 87, 0.25);
}

.profile-card:hover::before {
    opacity: 1;
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.profile-num {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    color: rgba(4, 120, 87, 0.15);
    letter-spacing: -0.02em;
    line-height: 1;
}

.profile-header i {
    font-size: 20px;
    color: var(--primary);
}

.profile-title {
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 8px;
    line-height: 1.3;
}

.profile-skills {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.profile-skills li {
    position: relative;
    padding-left: 16px;
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 3px;
}

.profile-skills li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary-light);
}

/* ============================================================
   35. CERTIFICATION LIST (2.5.3 Sertifikasi)
   ============================================================ */
.certification-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cert-item {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 12px 18px;
    background: linear-gradient(90deg,
        rgba(4, 120, 87, 0.04) 0%,
        rgba(16, 185, 129, 0.02) 100%);
    border: 1px solid rgba(4, 120, 87, 0.12);
    border-radius: 10px;
    transition: all 0.22s ease;
}

.cert-item:hover {
    border-color: var(--primary);
    transform: translateX(6px);
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.1);
}

.cert-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 17px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.25);
}

.cert-content { flex: 1; }

.cert-title {
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 2px;
    line-height: 1.3;
}

.cert-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ============================================================
   36. COMPARISON TABLE (2.6 Keunggulan Kompetitif)
   ============================================================ */
.comparison-table th {
    background: var(--primary) !important;
    color: #ffffff !important;
    font-family: var(--font-heading);
    font-size: 12.5px;
    text-align: center !important;
}

.comparison-table th:first-child {
    text-align: left !important;
}

.comparison-table td {
    font-size: 12.5px;
    vertical-align: middle;
    text-align: center;
}

.comparison-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--primary-dark);
}

.check-yes {
    color: var(--primary) !important;
    font-weight: 600;
}

.check-yes i {
    color: var(--primary);
    margin-right: 6px;
}

.check-no {
    color: #dc2626 !important;
    font-weight: 500;
}

.check-no i {
    color: #dc2626;
    margin-right: 6px;
}

.check-warn {
    color: #d97706 !important;
    font-weight: 500;
}

.check-warn i {
    color: #d97706;
    margin-right: 6px;
}

/* ============================================================
   37. DIFFERENTIATOR BOX (Faktor Pembeda Utama)
   ============================================================ */
.differentiator-box {
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.05) 0%,
        rgba(217, 119, 6, 0.05) 100%);
    border: 2px solid var(--primary);
    border-radius: 14px;
    padding: 26px 30px;
    text-align: center;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
}

.differentiator-box::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(217, 119, 6, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.differentiator-icon {
    width: 44px;
    height: 44px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    margin: 0 auto 14px;
    box-shadow: 0 6px 14px rgba(4, 120, 87, 0.3);
}

.differentiator-quote {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 600;
    color: var(--primary-dark);
    line-height: 1.55;
    letter-spacing: -0.005em;
    margin-bottom: 12px;
}

.differentiator-quote strong {
    color: var(--accent);
}

.differentiator-caption {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    letter-spacing: 0.02em;
}

/* ============================================================
   38. RESPONSIVE untuk bab-2
   ============================================================ */
@media (max-width: 900px) {
    .vision-block {
        flex-direction: column;
        padding: 20px;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .value-card:last-child:nth-child(odd) {
        grid-column: span 1;
    }

    .graduate-profiles {
        grid-template-columns: 1fr;
    }

    .vision-text {
        font-size: 15px;
    }

    .differentiator-quote {
        font-size: 14px;
    }

    .comparison-table th,
    .comparison-table td {
        font-size: 11px;
        padding: 7px 8px;
    }

    .comparison-table td:first-child {
        font-size: 11.5px;
    }
}

@media (max-width: 480px) {
    .mission-item {
        padding: 14px 16px;
        gap: 12px;
    }

    .mission-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .mission-title {
        font-size: 13.5px;
    }

    .value-name {
        font-size: 14px;
    }
}

/* ============================================================
   40. PHASE OVERVIEW (3.1 Ikhtisar Tahapan)
   ============================================================ */
.phase-overview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.phase-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px 18px 16px;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.phase-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.phase-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(4, 120, 87, 0.25);
}

.phase-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.phase-num {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.02em;
    line-height: 1;
}

.phase-badge {
    display: inline-block;
    background: rgba(217, 119, 6, 0.12);
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.04em;
}

.phase-title {
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1.3;
    margin-bottom: 6px;
}

.phase-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 12px;
}

.phase-progress {
    height: 4px;
    background: rgba(4, 120, 87, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.phase-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* ============================================================
   41. PHASE HEADER (3.2, 3.3, 3.4, 3.5)
   ============================================================ */
.phase-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.06) 0%,
        rgba(16, 185, 129, 0.04) 100%);
    border-left: 5px solid var(--primary);
    border-radius: 12px;
    margin-bottom: 20px;
}

.phase-header-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 22px;
    box-shadow: 0 6px 14px rgba(4, 120, 87, 0.3);
}

.phase-header-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.15em;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.phase-header-title {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 800;
    color: var(--primary-dark);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* ============================================================
   42. ACTIVITY LIST (Aktivitas Utama per Fase)
   ============================================================ */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.activity-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    transition: all 0.22s ease;
}

.activity-item:hover {
    border-color: rgba(4, 120, 87, 0.25);
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

.activity-check {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 11px;
    margin-top: 2px;
    box-shadow: 0 3px 8px rgba(4, 120, 87, 0.25);
}

.activity-content { flex: 1; }

.activity-title {
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 3px;
    line-height: 1.35;
}

.activity-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.55;
}

/* ============================================================
   43. GANTT CHART (3.6)
   ============================================================ */
.gantt-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    background: #ffffff;
    padding: 4px;
    margin-bottom: 16px;
}

.gantt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    min-width: 720px;
}

.gantt-table th {
    background: var(--primary);
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 700;
    padding: 8px 4px;
    text-align: center;
    font-size: 10.5px;
    letter-spacing: 0.02em;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.gantt-table th:last-child { border-right: none; }

.gantt-table th.gantt-activity {
    text-align: left;
    padding-left: 14px;
    width: 30%;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.gantt-table td {
    padding: 7px 4px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid rgba(226, 232, 240, 0.5);
    vertical-align: middle;
}

.gantt-table td.gantt-activity {
    text-align: left;
    padding-left: 14px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary-dark);
    white-space: nowrap;
    background: #fafbfc;
    border-right: 1px solid var(--border-color);
}

.gantt-table tr:last-child td { border-bottom: none; }
.gantt-table tr:hover td { background: rgba(4, 120, 87, 0.03); }
.gantt-table tr:hover td.gantt-activity { background: rgba(4, 120, 87, 0.06); }

/* Gantt phase tag */
.gantt-phase-tag {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    margin-right: 8px;
    font-family: var(--font-heading);
    vertical-align: middle;
}

.gantt-phase-tag.p1 {
    background: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
}

.gantt-phase-tag.p2 {
    background: rgba(4, 120, 87, 0.15);
    color: var(--primary);
}

.gantt-phase-tag.p3 {
    background: rgba(217, 119, 6, 0.15);
    color: var(--accent);
}

.gantt-phase-tag.p4 {
    background: rgba(139, 92, 246, 0.15);
    color: #6d28d9;
}

/* Gantt bar */
.gantt-bar {
    display: block;
    height: 14px;
    border-radius: 4px;
    width: 85%;
    margin: 0 auto;
}

.gantt-bar.p1 {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.gantt-bar.p2 {
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    box-shadow: 0 2px 6px rgba(4, 120, 87, 0.3);
}

.gantt-bar.p3 {
    background: linear-gradient(90deg, var(--accent), #f59e0b);
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
}

.gantt-bar.p4 {
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
}

/* Gantt legend */
.gantt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    padding: 10px 14px;
    background: var(--bg-light);
    border-radius: 8px;
    font-size: 11px;
    color: var(--text-main);
    font-weight: 500;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}

.legend-dot.p1 { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.legend-dot.p2 { background: linear-gradient(90deg, var(--primary), var(--primary-light)); }
.legend-dot.p3 { background: linear-gradient(90deg, var(--accent), #f59e0b); }
.legend-dot.p4 { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }

/* ============================================================
   44. INLINE LIST (dalam tabel)
   ============================================================ */
.inline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.inline-list li {
    position: relative;
    padding-left: 14px;
    font-size: 11.5px;
    color: var(--text-main);
    line-height: 1.5;
}

.inline-list li::before {
    content: '▪';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-size: 10px;
}

/* ============================================================
   45. KPI GRID (Indikator Keberhasilan)
   ============================================================ */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 12px;
}

.kpi-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.05) 0%,
        rgba(16, 185, 129, 0.08) 100%);
    border: 1px solid rgba(4, 120, 87, 0.15);
    border-radius: 12px;
    transition: all 0.25s ease;
}

.kpi-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px -6px rgba(4, 120, 87, 0.2);
    border-color: var(--primary);
}

.kpi-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    background: var(--primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.25);
}

.kpi-content { flex: 1; }

.kpi-value {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-dark);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.kpi-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 3px;
    line-height: 1.3;
}

/* ============================================================
   46. RESPONSIVE untuk bab-3
   ============================================================ */
@media (max-width: 900px) {
    .phase-overview {
        grid-template-columns: repeat(2, 1fr);
    }

    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .phase-header {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }

    .phase-header-icon {
        width: 46px;
        height: 46px;
        font-size: 20px;
    }

    .gantt-table {
        font-size: 10px;
    }

    .gantt-table th.gantt-activity,
    .gantt-table td.gantt-activity {
        font-size: 10.5px;
        padding-left: 10px;
    }

    .gantt-legend {
        gap: 10px;
        font-size: 10.5px;
    }
}

@media (max-width: 480px) {
    .phase-overview {
        grid-template-columns: 1fr;
    }

    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .activity-item {
        padding: 10px 12px;
        gap: 10px;
    }

    .activity-title {
        font-size: 12.5px;
    }

    .activity-desc {
        font-size: 11.5px;
    }
}

/* ============================================================
   47. PRINT — Gantt Chart khusus
   ============================================================ */
@media print {
    .gantt-wrapper {
        overflow: visible;
        page-break-inside: avoid;
    }

    .gantt-table {
        font-size: 9.5px;
    }

    .gantt-table th,
    .gantt-table td {
        padding: 5px 3px;
    }

    .phase-card,
    .activity-item,
    .kpi-item {
        break-inside: avoid;
    }
}

/* ============================================================
   48. BLUEPRINT DENAH (4.1 Denah Umum)
   ============================================================ */
.blueprint-wrapper {
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.03) 0%,
        rgba(16, 185, 129, 0.02) 100%);
    border: 2px solid rgba(4, 120, 87, 0.15);
    border-radius: 14px;
    padding: 20px 20px 16px;
    margin-bottom: 20px;
    position: relative;
}

.blueprint-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(4, 120, 87, 0.2);
}

.blueprint-title i {
    color: var(--primary);
    font-size: 16px;
}

.blueprint-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.bp-block {
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.bp-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    transition: opacity 0.25s ease;
}

.bp-block:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px -8px rgba(4, 120, 87, 0.25);
    border-color: var(--primary);
}

.bp-block.bp-lab::before,
.bp-block.bp-server::before,
.bp-block.bp-studio::before,
.bp-block.bp-kelas::before { background: linear-gradient(90deg, var(--primary), var(--primary-light)); }

.bp-block.bp-asrama::before,
.bp-block.bp-musholla::before { background: linear-gradient(90deg, var(--accent), #f59e0b); }

.bp-block.bp-makan::before,
.bp-block.bp-kantor::before,
.bp-block.bp-outdoor::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }

.bp-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ffffff;
    flex-shrink: 0;
}

.bp-lab .bp-icon,
.bp-server .bp-icon,
.bp-studio .bp-icon,
.bp-kelas .bp-icon {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.25);
}

.bp-asrama .bp-icon,
.bp-musholla .bp-icon {
    background: linear-gradient(135deg, var(--accent), #b45309);
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.25);
}

.bp-makan .bp-icon,
.bp-kantor .bp-icon,
.bp-outdoor .bp-icon {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25);
}

.bp-name {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1.25;
}

.bp-area {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 600;
}

.bp-wide { grid-column: span 4; }
.bp-wide .bp-icon { background: linear-gradient(135deg, #64748b, #334155); }

.blueprint-legend {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.legend-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.02em;
}

.lt-zona1 {
    background: rgba(4, 120, 87, 0.12);
    color: var(--primary);
}

.lt-zona2 {
    background: rgba(217, 119, 6, 0.12);
    color: var(--accent);
}

.lt-zona3 {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

/* ============================================================
   49. ROOM HEADER (4.2, 4.3, 4.4)
   ============================================================ */
.room-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #ffffff;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 8px 20px -8px rgba(4, 120, 87, 0.4);
    position: relative;
    overflow: hidden;
}

.room-header::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.room-header-alt {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.4);
}

.room-header-accent {
    background: linear-gradient(135deg, var(--accent), #b45309);
    box-shadow: 0 8px 20px -8px rgba(217, 119, 6, 0.4);
}

.room-header-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ffffff;
    backdrop-filter: blur(8px);
    position: relative;
    z-index: 1;
}

.room-header-info {
    flex: 1;
    position: relative;
    z-index: 1;
}

.room-header-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 3px;
    text-transform: uppercase;
}

.room-header-title {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.room-header-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    color: #ffffff;
    position: relative;
    z-index: 1;
}

.room-header-badge i {
    font-size: 11px;
    color: var(--accent-light);
}

/* ============================================================
   50. LAB LAYOUT (4.2 Visual Grid 30 PC)
   ============================================================ */
.lab-layout {
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.04) 0%,
        rgba(16, 185, 129, 0.03) 100%);
    border: 2px solid rgba(4, 120, 87, 0.12);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
}

.lab-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.lab-instructor-row {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 16px;
}

.lab-desk {
    background: #ffffff;
    border: 2px solid var(--primary);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-dark);
}

.lab-desk i {
    color: var(--primary);
    font-size: 14px;
}

.lab-screen {
    background: #1e293b;
    color: #ffffff;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.lab-pc {
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 16px;
    transition: all 0.22s ease;
}

.lab-pc:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 6px 14px -4px rgba(4, 120, 87, 0.4);
}

.lab-caption {
    text-align: center;
    font-size: 11.5px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(4, 120, 87, 0.2);
}

/* ============================================================
   51. FACILITY GRID (4.2 Fasilitas Pendukung Lab)
   ============================================================ */
.facility-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.facility-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    transition: all 0.22s ease;
}

.facility-item:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.facility-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, rgba(4, 120, 87, 0.1), rgba(16, 185, 129, 0.15));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 16px;
}

.facility-content { flex: 1; }

.facility-name {
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 2px;
    line-height: 1.3;
}

.facility-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.45;
}

/* ============================================================
   52. SERVER LIST (4.3 Server & Network Room)
   ============================================================ */
.server-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.server-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    transition: all 0.22s ease;
}

.server-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
    border-left-color: var(--accent);
}

.server-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.25);
}

.server-content { flex: 1; }

.server-name {
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 3px;
    line-height: 1.3;
}

.server-spec {
    font-size: 12px;
    color: var(--text-main);
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 3px;
}

.server-purpose {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.5;
    font-style: italic;
}

/* ============================================================
   53. EQUIPMENT GRID (4.4 Studio Multimedia)
   ============================================================ */
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.equipment-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 14px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.equipment-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.equipment-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(217, 119, 6, 0.3);
}

.equipment-card:hover::before { opacity: 1; }

.equipment-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--accent), #b45309);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    margin: 0 auto 10px;
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.25);
}

.equipment-name {
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 4px;
    line-height: 1.3;
}

.equipment-spec {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.45;
}

/* ============================================================
   54. ROOM SPEC CARD (4.5 Ruang Kelas & Asrama)
   ============================================================ */
.room-spec-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 18px;
}

.room-spec-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.08) 0%,
        rgba(16, 185, 129, 0.05) 100%);
    border-bottom: 1px solid rgba(4, 120, 87, 0.12);
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary-dark);
}

.room-spec-header i {
    color: var(--primary);
    font-size: 16px;
}

.room-spec-body {
    padding: 4px 0;
}

.room-spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 18px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    gap: 12px;
}

.room-spec-item:last-child {
    border-bottom: none;
}

.room-spec-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
}

.room-spec-value {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary-dark);
    text-align: right;
}

/* ============================================================
   55. SUPPORT GRID (4.6 Fasilitas Pendukung)
   ============================================================ */
.support-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.support-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
}

.support-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(4, 120, 87, 0.25);
}

.support-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.1) 0%,
        rgba(16, 185, 129, 0.15) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 18px;
}

.support-content { flex: 1; }

.support-title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 4px;
    line-height: 1.3;
}

.support-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.55;
}

/* ============================================================
   56. RESPONSIVE untuk bab-4
   ============================================================ */
@media (max-width: 900px) {
    .blueprint-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bp-wide { grid-column: span 2; }

    .room-header {
        flex-direction: column;
        text-align: center;
        padding: 16px;
        gap: 12px;
    }

    .room-header-info { text-align: center; }

    .lab-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .lab-instructor-row {
        grid-template-columns: 1fr;
    }

    .facility-grid,
    .equipment-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .support-grid {
        grid-template-columns: 1fr;
    }

    .room-spec-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .room-spec-value {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .blueprint-grid {
        grid-template-columns: 1fr;
    }

    .bp-wide { grid-column: span 1; }

    .lab-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .facility-grid,
    .equipment-grid {
        grid-template-columns: 1fr;
    }

    .bp-icon {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .bp-name {
        font-size: 11px;
    }
}

/* ============================================================
   57. PRINT — Masterplan khusus
   ============================================================ */
@media print {
    .blueprint-wrapper,
    .lab-layout,
    .room-spec-card,
    .server-item,
    .equipment-card,
    .support-card,
    .facility-item {
        break-inside: avoid;
    }

    .room-header {
        break-after: avoid;
    }

    .lab-pc:hover {
        transform: none;
        background: #ffffff;
        color: var(--primary);
    }

    .bp-block:hover,
    .equipment-card:hover,
    .support-card:hover {
        transform: none;
    }
}
/* ============================================================
   58. CURRICULUM COMPOSITION (5.1 Komposisi Kurikulum)
   ============================================================ */
.curriculum-composition {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.comp-item {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.comp-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.comp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.comp-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
}

.comp-item:nth-child(1) .comp-icon {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.25);
}

.comp-item:nth-child(2) .comp-icon {
    background: linear-gradient(135deg, var(--accent), #b45309);
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.25);
}

.comp-item:nth-child(3) .comp-icon {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.25);
}

.comp-pct {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    color: var(--primary-dark);
    letter-spacing: -0.02em;
    line-height: 1;
}

.comp-name {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 4px;
}

.comp-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 12px;
}

.comp-bar {
    height: 6px;
    background: rgba(226, 232, 240, 0.8);
    border-radius: 3px;
    overflow: hidden;
}

.comp-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

/* ============================================================
   59. QUARTER TIMELINE (5.2 Overview 4 Kuartal)
   ============================================================ */
.quarter-timeline {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.quarter-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
}

.quarter-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.quarter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.quarter-header.q1 {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.quarter-header.q2 {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.quarter-header.q3 {
    background: linear-gradient(135deg, var(--accent), #b45309);
}

.quarter-header.q4 {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.quarter-header::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.quarter-num {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.quarter-weeks {
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 20px;
    position: relative;
    z-index: 1;
    letter-spacing: 0.02em;
}

.quarter-body {
    padding: 18px 20px;
}

.quarter-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 2px;
    letter-spacing: -0.01em;
}

.quarter-sub {
    font-size: 11.5px;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}

.quarter-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}

.quarter-list li {
    position: relative;
    padding-left: 20px;
    font-size: 12px;
    color: var(--text-main);
    line-height: 1.6;
    margin-bottom: 3px;
}

.quarter-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--primary);
    font-size: 10px;
}

.quarter-project {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.06) 0%,
        rgba(16, 185, 129, 0.03) 100%);
    border-left: 3px solid var(--primary);
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--primary-dark);
    line-height: 1.4;
}

.quarter-project i {
    color: var(--accent);
    font-size: 13px;
    flex-shrink: 0;
}

/* ============================================================
   60. QUARTER INFO HEADER (5.3 s/d 5.6 Silabus)
   ============================================================ */
.quarter-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.05) 0%,
        rgba(16, 185, 129, 0.03) 100%);
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    margin-bottom: 18px;
}

.quarter-info-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
}

.quarter-info-icon.q1 {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.25);
}

.quarter-info-icon.q2 {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25);
}

.quarter-info-icon.q3 {
    background: linear-gradient(135deg, var(--accent), #b45309);
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.25);
}

.quarter-info-icon.q4 {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.25);
}

.quarter-info-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.12em;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.quarter-info-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-dark);
    letter-spacing: -0.005em;
    line-height: 1.25;
}

/* ============================================================
   61. SILABUS TABLE (5.3 s/d 5.6)
   ============================================================ */
.silabus-table {
    font-size: 11px !important;
}

.silabus-table th {
    font-size: 10.5px !important;
    padding: 8px 10px !important;
    line-height: 1.3;
}

.silabus-table td {
    padding: 7px 10px !important;
    font-size: 11px !important;
    line-height: 1.4;
    vertical-align: top;
}

.silabus-table td strong {
    color: var(--primary-dark);
    font-family: var(--font-heading);
}

.silabus-table .total-row td {
    background: linear-gradient(90deg,
        rgba(4, 120, 87, 0.1) 0%,
        rgba(16, 185, 129, 0.06) 100%) !important;
    color: var(--primary-dark) !important;
    text-align: center;
    font-size: 11.5px !important;
    padding: 10px !important;
}

/* ============================================================
   62. DINIYAH MODULES (5.7 Kurikulum Diniyah)
   ============================================================ */
.diniyah-modules {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.module-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
}

.module-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(4, 120, 87, 0.25);
}

.module-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.06) 0%,
        rgba(16, 185, 129, 0.03) 100%);
    border-bottom: 1px solid rgba(4, 120, 87, 0.1);
}

.module-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    box-shadow: 0 3px 8px rgba(4, 120, 87, 0.25);
}

.module-meta { flex: 1; }

.module-label {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.module-name {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
    color: var(--primary-dark);
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.module-list {
    list-style: none;
    padding: 14px 18px;
    margin: 0;
}

.module-list li {
    position: relative;
    padding-left: 20px;
    font-size: 12px;
    color: var(--text-main);
    line-height: 1.6;
    margin-bottom: 4px;
}

.module-list li:last-child { margin-bottom: 0; }

.module-list li::before {
    content: '\f111';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 3px;
    color: var(--primary-light);
    font-size: 6px;
}

/* ============================================================
   63. EVALUATION GRID (5.9 Metode Evaluasi)
   ============================================================ */
.evaluation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.eval-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 16px 14px;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.eval-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.eval-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(4, 120, 87, 0.25);
}

.eval-card:hover::before { opacity: 1; }

.eval-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.1) 0%,
        rgba(16, 185, 129, 0.15) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 17px;
    margin-bottom: 10px;
}

.eval-name {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 6px;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.eval-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 10px;
    flex: 1;
}

.eval-desc strong {
    color: var(--primary-dark);
    font-weight: 700;
}

.eval-weight {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(217, 119, 6, 0.1);
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.04em;
}

/* ============================================================
   64. RESPONSIVE untuk bab-5
   ============================================================ */
@media (max-width: 900px) {
    .curriculum-composition {
        grid-template-columns: 1fr;
    }

    .quarter-timeline {
        grid-template-columns: 1fr;
    }

    .diniyah-modules {
        grid-template-columns: 1fr;
    }

    .evaluation-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .silabus-table {
        font-size: 10px !important;
    }

    .silabus-table th,
    .silabus-table td {
        padding: 6px 7px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 480px) {
    .evaluation-grid {
        grid-template-columns: 1fr;
    }

    .comp-pct {
        font-size: 22px;
    }

    .quarter-num {
        font-size: 18px;
    }

    .quarter-weeks {
        font-size: 10.5px;
        padding: 3px 8px;
    }

    .quarter-title {
        font-size: 14px;
    }

    .module-name {
        font-size: 13px;
    }

    .silabus-table {
        font-size: 9px !important;
    }

    .silabus-table th,
    .silabus-table td {
        padding: 5px 5px !important;
        font-size: 9px !important;
    }
}

/* ============================================================
   65. PRINT — Kurikulum khusus
   ============================================================ */
@media print {
    .quarter-card,
    .module-card,
    .eval-card,
    .comp-item {
        break-inside: avoid;
    }

    .silabus-table tr {
        break-inside: avoid;
    }

    .quarter-card:hover,
    .module-card:hover,
    .eval-card:hover,
    .comp-item:hover {
        transform: none;
    }
}

/* ============================================================
   66. DAILY TIMELINE (6.1 Jadwal Harian Santri)
   ============================================================ */
.daily-timeline {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    padding-left: 6px;
    margin-bottom: 20px;
}

.daily-timeline::before {
    content: '';
    position: absolute;
    left: 98px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(180deg,
        rgba(4, 120, 87, 0.1) 0%,
        rgba(4, 120, 87, 0.3) 50%,
        rgba(4, 120, 87, 0.1) 100%);
    border-radius: 2px;
}

.dt-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    transition: all 0.22s ease;
    position: relative;
}

.dt-item:hover {
    background: rgba(4, 120, 87, 0.03);
    transform: translateX(4px);
}

.dt-time {
    flex-shrink: 0;
    width: 78px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-dark);
    letter-spacing: 0.02em;
    padding-top: 3px;
    text-align: right;
}

.dt-dot {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--primary);
    margin-top: 4px;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.1);
}

.dt-prayer .dt-dot { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); }
.dt-study .dt-dot { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.15); }
.dt-personal .dt-dot { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15); }
.dt-break .dt-dot { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); }
.dt-night .dt-dot { border-color: #64748b; box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.15); }

.dt-content { flex: 1; }

.dt-title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 3px;
    line-height: 1.35;
}

.dt-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ============================================================
   67. WEEKLY SCHEDULE TABLE (6.1.1)
   ============================================================ */
.weekly-schedule {
    font-size: 11.5px !important;
}

.weekly-schedule th {
    font-size: 11px !important;
    padding: 9px 12px !important;
}

.weekly-schedule td {
    font-size: 11.5px !important;
    padding: 9px 12px !important;
    vertical-align: top;
    line-height: 1.5;
}

.weekly-schedule td strong {
    color: var(--primary-dark);
    font-family: var(--font-heading);
}

.weekly-schedule tr:hover td {
    background: rgba(4, 120, 87, 0.03);
}

/* ============================================================
   68. TAHFIZH GRID (6.2 Target Hafalan)
   ============================================================ */
.tahfizh-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.tahfizh-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
}

.tahfizh-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.tahfizh-header {
    padding: 12px 16px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.tahfizh-header::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.tahfizh-header.q1 { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.tahfizh-header.q2 { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.tahfizh-header.q3 { background: linear-gradient(135deg, var(--accent), #b45309); }
.tahfizh-header.q4 { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }

.tahfizh-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

.tahfizh-juz {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
    position: relative;
    z-index: 1;
    letter-spacing: -0.01em;
}

.tahfizh-body {
    padding: 14px 16px;
}

.tahfizh-target {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 8px;
    line-height: 1.3;
}

.tahfizh-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
    padding-left: 8px;
    border-left: 2px solid rgba(4, 120, 87, 0.15);
}

.tahfizh-list span {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

.tahfizh-meta {
    font-size: 10.5px;
    color: var(--accent);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px dashed rgba(217, 119, 6, 0.2);
}

.tahfizh-meta i {
    font-size: 10px;
}

/* ============================================================
   69. CHARACTER PILLARS (6.3 Pembinaan Adab)
   ============================================================ */
.character-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.pillar-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 16px 14px;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.pillar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.pillar-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(4, 120, 87, 0.25);
}

.pillar-card:hover::before { opacity: 1; }

.pillar-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 10px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.25);
}

.pillar-name {
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 6px;
    letter-spacing: -0.005em;
    line-height: 1.25;
}

.pillar-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.55;
}

/* ============================================================
   70. METHOD LIST (6.3.1 Metode Pembinaan)
   ============================================================ */
.method-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.method-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    transition: all 0.22s ease;
}

.method-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
    border-left-color: var(--accent);
}

.method-num {
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    color: rgba(4, 120, 87, 0.3);
    letter-spacing: -0.02em;
    line-height: 1;
    padding-top: 2px;
}

.method-content { flex: 1; }

.method-title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 3px;
    line-height: 1.3;
}

.method-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.55;
}

.method-desc em {
    color: var(--primary);
    font-style: italic;
    font-weight: 600;
}

/* ============================================================
   71. PROJECT TYPES (6.4 Praktik Proyek)
   ============================================================ */
.project-types {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.project-type {
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.05) 0%,
        rgba(16, 185, 129, 0.03) 100%);
    border: 1px solid rgba(4, 120, 87, 0.15);
    border-radius: 12px;
    padding: 16px 14px;
    text-align: center;
    transition: all 0.25s ease;
}

.project-type:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px -6px rgba(4, 120, 87, 0.25);
    border-color: var(--primary);
}

.pt-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    margin: 0 auto 10px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.25);
}

.pt-name {
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 5px;
    letter-spacing: -0.005em;
}

.pt-example {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.45;
}

/* ============================================================
   72. PARTNER GRID (6.5 Mitra Magang)
   ============================================================ */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.partner-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    transition: all 0.22s ease;
}

.partner-item:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.partner-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, rgba(4, 120, 87, 0.1), rgba(16, 185, 129, 0.15));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 16px;
}

.partner-content { flex: 1; min-width: 0; }

.partner-name {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 3px;
    line-height: 1.3;
}

.partner-type {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(217, 119, 6, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ============================================================
   73. GRADE SCALE (6.6.2 Predikat)
   ============================================================ */
.grade-scale {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.grade-item {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    transition: all 0.22s ease;
    position: relative;
    overflow: hidden;
}

.grade-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.grade-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.grade-a::before { background: #059669; }
.grade-b::before { background: #10b981; }
.grade-c::before { background: var(--accent); }
.grade-d::before { background: #f59e0b; }
.grade-e::before { background: #dc2626; }

.grade-label {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 6px;
}

.grade-a .grade-label { color: #059669; }
.grade-b .grade-label { color: #10b981; }
.grade-c .grade-label { color: var(--accent); }
.grade-d .grade-label { color: #f59e0b; }
.grade-e .grade-label { color: #dc2626; }

.grade-range {
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}

.grade-desc {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.35;
    font-style: italic;
}

/* ============================================================
   74. RULES GRID (6.7 Tata Tertib)
   ============================================================ */
.rules-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

.rules-category {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.rules-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
}

.rules-header i {
    font-size: 15px;
}

.rules-ok {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.rules-ban {
    background: linear-gradient(135deg, #dc2626, #991b1b);
}

.rules-list {
    list-style: none;
    padding: 14px 18px;
    margin: 0;
}

.rules-list li {
    position: relative;
    padding-left: 20px;
    font-size: 12px;
    color: var(--text-main);
    line-height: 1.6;
    margin-bottom: 5px;
}

.rules-list li:last-child { margin-bottom: 0; }

.rules-list li::before {
    content: '\f111';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 3px;
    color: var(--primary);
    font-size: 6px;
}

.rules-ban ~ .rules-list li::before,
.rules-category:has(.rules-ban) .rules-list li::before {
    color: #dc2626;
}

/* ============================================================
   75. SANKSI LIST (6.7.1 Jenjang Sanksi)
   ============================================================ */
.sanksi-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sanksi-item {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    transition: all 0.22s ease;
}

.sanksi-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

.sanksi-level {
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    min-width: 68px;
    text-align: center;
}

.level-1 {
    background: rgba(217, 119, 6, 0.12);
    color: var(--accent);
}

.level-2 {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}

.level-3 {
    background: rgba(153, 27, 27, 0.15);
    color: #991b1b;
}

.sanksi-content { flex: 1; }

.sanksi-title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 3px;
    line-height: 1.3;
}

.sanksi-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.55;
}

/* ============================================================
   76. RESPONSIVE untuk bab-6
   ============================================================ */
@media (max-width: 900px) {
    .daily-timeline::before { left: 82px; }
    .dt-time { width: 62px; font-size: 11px; }

    .weekly-schedule {
        font-size: 10px !important;
    }

    .weekly-schedule th,
    .weekly-schedule td {
        padding: 6px 7px !important;
        font-size: 10px !important;
    }

    .tahfizh-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .character-pillars {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-types {
        grid-template-columns: repeat(2, 1fr);
    }

    .partner-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .grade-scale {
        grid-template-columns: repeat(3, 1fr);
    }

    .rules-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .daily-timeline::before { display: none; }

    .dt-item {
        flex-direction: column;
        gap: 6px;
        padding: 10px 12px;
        background: var(--bg-light);
        border-radius: 10px;
    }

    .dt-time {
        width: auto;
        text-align: left;
        font-size: 11px;
        color: var(--accent);
    }

    .dt-dot { display: none; }

    .tahfizh-grid,
    .character-pillars,
    .project-types,
    .partner-grid,
    .grade-scale {
        grid-template-columns: 1fr;
    }

    .sanksi-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .method-item {
        padding: 10px 12px;
        gap: 10px;
    }

    .method-num {
        font-size: 16px;
    }
}

/* ============================================================
   77. PRINT — Sistem Pembelajaran khusus
   ============================================================ */
@media print {
    .dt-item,
    .tahfizh-card,
    .pillar-card,
    .method-item,
    .project-type,
    .partner-item,
    .grade-item,
    .sanksi-item {
        break-inside: avoid;
    }

    .daily-timeline::before {
        background: #047857;
    }

    .weekly-schedule tr,
    .rules-category {
        break-inside: avoid;
    }
}

/* ============================================================
   78. ORG CHART (7.1 Bagan Organisasi)
   ============================================================ */
.org-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 22px 16px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.03) 0%,
        rgba(16, 185, 129, 0.02) 100%);
    border: 2px solid rgba(4, 120, 87, 0.12);
    border-radius: 16px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.org-chart::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(217, 119, 6, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.org-level {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    z-index: 1;
}

.org-level-multi {
    gap: 10px;
}

.org-level-staff {
    margin-top: 4px;
}

/* Kotak jabatan */
.org-box {
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 18px;
    text-align: center;
    min-width: 200px;
    max-width: 260px;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.org-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.org-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Level 1: Pembina */
.org-pembina {
    background: linear-gradient(135deg, var(--primary-dark), #042f23);
    border-color: var(--primary-dark);
    color: #ffffff;
    min-width: 340px;
}

.org-pembina::before {
    background: linear-gradient(90deg, var(--accent-light), var(--accent));
}

.org-pembina .org-role {
    color: #ffffff;
}

.org-pembina .org-desc {
    color: #a7f3d0;
}

.org-pembina .org-icon {
    background: rgba(255, 255, 255, 0.15);
    color: var(--accent-light);
}

/* Level 2: Mudir */
.org-mudir {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary);
    color: #ffffff;
    min-width: 320px;
}

.org-mudir::before {
    background: linear-gradient(90deg, var(--primary-light), var(--accent-light));
}

.org-mudir .org-role {
    color: #ffffff;
}

.org-mudir .org-desc {
    color: #a7f3d0;
}

.org-mudir .org-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

/* Level 3: Divisi */
.org-divisi {
    flex: 1;
    min-width: 160px;
    max-width: 220px;
    padding: 12px 12px;
}

.org-akademik::before { background: linear-gradient(90deg, #3b82f6, #1d4ed8); }
.org-pengasuhan::before { background: linear-gradient(90deg, var(--accent), #b45309); }
.org-multimedia::before { background: linear-gradient(90deg, #8b5cf6, #6d28d9); }
.org-keuangan::before { background: linear-gradient(90deg, #059669, #047857); }

.org-akademik .org-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.org-pengasuhan .org-icon { background: linear-gradient(135deg, var(--accent), #b45309); }
.org-multimedia .org-icon { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.org-keuangan .org-icon { background: linear-gradient(135deg, #059669, #047857); }

/* Icon dalam kotak */
.org-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #ffffff;
    margin: 0 auto 10px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.2);
    transition: transform 0.25s ease;
}

.org-box:hover .org-icon {
    transform: scale(1.08);
}

/* Text */
.org-role {
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 4px;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.org-desc {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.4;
    font-weight: 500;
}

/* Connector garis vertikal */
.org-connector {
    width: 2px;
    height: 20px;
    background: linear-gradient(180deg, var(--primary), var(--primary-light));
    margin: 0 auto;
    border-radius: 2px;
}

/* Branch horizontal connector */
.org-branch {
    height: 2px;
    width: 70%;
    background: linear-gradient(90deg,
        transparent,
        var(--primary) 15%,
        var(--primary) 85%,
        transparent);
    margin: 12px auto 20px;
    border-radius: 2px;
    position: relative;
}

.org-branch::before,
.org-branch::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 2px;
    height: 12px;
    background: var(--primary);
    border-radius: 2px;
}

.org-branch::before { left: 15%; }
.org-branch::after { right: 15%; }

.org-branch-sm {
    height: 2px;
    width: 50%;
    background: linear-gradient(90deg,
        transparent,
        var(--primary-light) 20%,
        var(--primary-light) 80%,
        transparent);
    margin: 16px auto 12px;
    border-radius: 2px;
}

/* Level 4: Staf */
.org-staff {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #ffffff;
    border: 1.5px dashed rgba(4, 120, 87, 0.3);
    border-radius: 30px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary-dark);
    transition: all 0.22s ease;
}

.org-staff:hover {
    background: rgba(4, 120, 87, 0.05);
    border-style: solid;
    border-color: var(--primary);
    transform: translateY(-2px);
}

.org-staff i {
    color: var(--primary);
    font-size: 13px;
}

/* ============================================================
   79. ROLE HEADER (7.2 s/d 7.6 Detail Jabatan)
   ============================================================ */
.role-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #ffffff;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 8px 20px -8px rgba(4, 120, 87, 0.4);
    position: relative;
    overflow: hidden;
}

.role-header::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.role-header-blue {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 8px 20px -8px rgba(59, 130, 246, 0.4);
}

.role-header-accent {
    background: linear-gradient(135deg, var(--accent), #b45309);
    box-shadow: 0 8px 20px -8px rgba(217, 119, 6, 0.4);
}

.role-header-purple {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    box-shadow: 0 8px 20px -8px rgba(139, 92, 246, 0.4);
}

.role-header-gold {
    background: linear-gradient(135deg, #d97706, #92400e);
    box-shadow: 0 8px 20px -8px rgba(146, 64, 14, 0.4);
}

.role-header-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ffffff;
    backdrop-filter: blur(8px);
    position: relative;
    z-index: 1;
}

.role-header-info {
    flex: 1;
    position: relative;
    z-index: 1;
}

.role-header-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 3px;
    text-transform: uppercase;
}

.role-header-title {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.role-header-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    color: #ffffff;
    position: relative;
    z-index: 1;
}

.role-header-badge i {
    font-size: 11px;
    color: var(--accent-light);
}

/* ============================================================
   80. CRITERIA GRID (7.2.1 Kriteria Mudir)
   ============================================================ */
.criteria-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.criteria-item {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 14px;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    text-align: center;
}

.criteria-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.criteria-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.1),
        rgba(16, 185, 129, 0.15));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 17px;
    margin: 0 auto 10px;
}

.criteria-title {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 5px;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.criteria-desc {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ============================================================
   81. SCOPE GRID (7.3.1 & 7.5.1 Lingkup Tanggung Jawab)
   ============================================================ */
.scope-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.scope-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 14px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.scope-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.scope-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(4, 120, 87, 0.25);
}

.scope-card:hover::before { opacity: 1; }

.scope-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    margin: 0 auto 10px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.2);
}

.scope-title {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 5px;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.scope-desc {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ============================================================
   82. PROGRAM LIST (7.4.1 Program Pengasuhan)
   ============================================================ */
.program-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.program-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    transition: all 0.22s ease;
}

.program-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
    border-left-color: var(--primary);
}

.program-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--accent), #b45309);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.25);
}

.program-content { flex: 1; }

.program-title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 3px;
    line-height: 1.3;
}

.program-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.55;
}

/* ============================================================
   83. ADMIN LIST (7.6.1 Sub-Bidang Administrasi)
   ============================================================ */
.admin-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.admin-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    transition: all 0.22s ease;
}

.admin-item:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.admin-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg,
        rgba(217, 119, 6, 0.1),
        rgba(217, 119, 6, 0.15));
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 15px;
}

.admin-content { flex: 1; }

.admin-title {
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 3px;
    line-height: 1.3;
}

.admin-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.55;
}

/* ============================================================
   84. SDM TABLE (7.7 Rekapitulasi SDM)
   ============================================================ */
.sdm-table {
    font-size: 11.5px !important;
}

.sdm-table th {
    font-size: 10.5px !important;
    padding: 9px 10px !important;
    line-height: 1.3;
}

.sdm-table td {
    font-size: 11px !important;
    padding: 8px 10px !important;
    vertical-align: middle;
    line-height: 1.4;
}

.sdm-table td strong {
    color: var(--primary-dark);
    font-family: var(--font-heading);
}

.sdm-table tr:hover td {
    background: rgba(4, 120, 87, 0.03);
}

/* ============================================================
   85. MEETING LIST (7.8 Mekanisme Koordinasi)
   ============================================================ */
.meeting-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.meeting-item {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    transition: all 0.22s ease;
}

.meeting-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(4, 120, 87, 0.25);
}

.meeting-freq {
    flex-shrink: 0;
    min-width: 90px;
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #ffffff;
    border-radius: 20px;
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
    box-shadow: 0 3px 8px rgba(4, 120, 87, 0.2);
}

.meeting-content { flex: 1; }

.meeting-title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 3px;
    line-height: 1.3;
}

.meeting-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.55;
}

/* ============================================================
   86. RESPONSIVE untuk bab-7
   ============================================================ */
@media (max-width: 900px) {
    .org-pembina { min-width: auto; width: 100%; max-width: 400px; }
    .org-mudir { min-width: auto; width: 100%; max-width: 380px; }

    .org-level-multi {
        flex-direction: column;
        align-items: center;
    }

    .org-divisi {
        min-width: 240px;
        max-width: 320px;
    }

    .org-branch {
        display: none;
    }

    .org-branch-sm {
        display: none;
    }

    .criteria-grid,
    .scope-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-list {
        grid-template-columns: 1fr;
    }

    .sdm-table {
        font-size: 10px !important;
    }

    .sdm-table th,
    .sdm-table td {
        padding: 6px 7px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 480px) {
    .org-chart { padding: 16px 10px; }

    .org-box {
        min-width: auto;
        width: 100%;
        max-width: 100%;
    }

    .criteria-grid,
    .scope-grid {
        grid-template-columns: 1fr;
    }

    .meeting-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .meeting-freq {
        min-width: auto;
    }

    .sdm-table {
        font-size: 9px !important;
    }

    .sdm-table th,
    .sdm-table td {
        padding: 5px 5px !important;
        font-size: 9px !important;
    }
}

/* ============================================================
   87. PRINT — Struktur Organisasi khusus
   ============================================================ */
@media print {
    .org-box,
    .role-header,
    .criteria-item,
    .scope-card,
    .program-item,
    .admin-item,
    .meeting-item,
    .org-staff {
        break-inside: avoid;
    }

    .org-box:hover,
    .criteria-item:hover,
    .scope-card:hover,
    .admin-item:hover,
    .meeting-item:hover {
        transform: none;
    }

    .sdm-table tr {
        break-inside: avoid;
    }
}

/* ============================================================
   88. PRINCIPLES GRID (8.1 Prinsip SOP)
   ============================================================ */
.principles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}

.principle-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.05) 0%,
        rgba(16, 185, 129, 0.03) 100%);
    border: 1px solid rgba(4, 120, 87, 0.15);
    border-radius: 12px;
    transition: all 0.25s ease;
}

.principle-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px -8px rgba(4, 120, 87, 0.25);
    border-color: var(--primary);
}

.principle-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.25);
}

.principle-content { flex: 1; }

.principle-name {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 3px;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.principle-desc {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ============================================================
   89. SOP OVERVIEW (8.1.1 Enam Kategori SOP)
   ============================================================ */
.sop-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.sop-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 16px 14px;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.sop-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.sop-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(4, 120, 87, 0.25);
}

.sop-card:hover::before { opacity: 1; }

.sop-num {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    color: rgba(4, 120, 87, 0.15);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 8px;
}

.sop-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 17px;
    margin-bottom: 12px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.25);
}

.sop-name {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 5px;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.sop-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ============================================================
   90. SOP HEADER (8.2 s/d 8.7 Header SOP)
   ============================================================ */
.sop-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #ffffff;
    border-radius: 12px;
    margin-bottom: 18px;
    box-shadow: 0 8px 20px -8px rgba(4, 120, 87, 0.4);
    position: relative;
    overflow: hidden;
}

.sop-header::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.sop-header-blue {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 8px 20px -8px rgba(59, 130, 246, 0.4);
}

.sop-header-accent {
    background: linear-gradient(135deg, var(--accent), #b45309);
    box-shadow: 0 8px 20px -8px rgba(217, 119, 6, 0.4);
}

.sop-header-purple {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    box-shadow: 0 8px 20px -8px rgba(139, 92, 246, 0.4);
}

.sop-header-gold {
    background: linear-gradient(135deg, #d97706, #92400e);
    box-shadow: 0 8px 20px -8px rgba(146, 64, 14, 0.4);
}

.sop-header-red {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    box-shadow: 0 8px 20px -8px rgba(220, 38, 38, 0.4);
}

.sop-header-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    backdrop-filter: blur(8px);
    position: relative;
    z-index: 1;
}

.sop-header-info {
    flex: 1;
    position: relative;
    z-index: 1;
}

.sop-header-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 3px;
    text-transform: uppercase;
}

.sop-header-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.sop-header-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

/* ============================================================
   91. FLOW STEPS (8.2.1 Alur Proses PSB)
   ============================================================ */
.flow-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flow-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    transition: all 0.22s ease;
    position: relative;
}

.flow-step:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
    border-left-color: var(--accent);
}

.flow-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.25);
    margin-top: 2px;
}

.flow-content { flex: 1; }

.flow-title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 3px;
    line-height: 1.3;
}

.flow-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.55;
}

/* ============================================================
   92. TEACHER STAGES (8.3.3 Tahapan Seleksi Guru)
   ============================================================ */
.teacher-stages {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.stage-item {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.stage-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.stage-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.stage-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    margin: 0 auto 10px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.25);
}

.stage-title {
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 5px;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.stage-desc {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.45;
}

/* ============================================================
   93. REWARD GRID (8.4.2 Poin Penghargaan)
   ============================================================ */
.reward-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.reward-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    background: linear-gradient(135deg,
        rgba(217, 119, 6, 0.05) 0%,
        rgba(251, 191, 36, 0.03) 100%);
    border: 1px solid rgba(217, 119, 6, 0.2);
    border-radius: 12px;
    transition: all 0.25s ease;
}

.reward-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px -8px rgba(217, 119, 6, 0.25);
    border-color: var(--accent);
}

.reward-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--accent), #b45309);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 17px;
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.25);
}

.reward-content { flex: 1; }

.reward-name {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 4px;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.reward-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ============================================================
   94. RULES TIMELINE (8.5.1 Aturan Lab)
   ============================================================ */
.rules-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rt-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.22s ease;
}

.rt-item:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(4, 120, 87, 0.25);
}

.rt-time {
    flex-shrink: 0;
    min-width: 80px;
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    padding: 6px 14px;
    border-radius: 20px;
    text-align: center;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 3px 8px rgba(4, 120, 87, 0.2);
}

.rt-content { flex: 1; }

.rt-content .custom-list li {
    font-size: 12px;
    margin-bottom: 5px;
}

/* ============================================================
   95. PROHIBITION GRID (8.5.2 Larangan Lab)
   ============================================================ */
.prohibition-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.prohibition-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    background: linear-gradient(135deg,
        rgba(220, 38, 38, 0.04) 0%,
        rgba(220, 38, 38, 0.02) 100%);
    border: 1px solid rgba(220, 38, 38, 0.15);
    border-left: 4px solid #dc2626;
    border-radius: 10px;
    transition: all 0.22s ease;
}

.prohibition-item:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 14px -6px rgba(220, 38, 38, 0.2);
    border-color: #dc2626;
}

.prohibition-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    background: #dc2626;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 13px;
}

.prohibition-text {
    font-size: 11.5px;
    color: var(--text-main);
    line-height: 1.55;
    font-weight: 500;
    padding-top: 4px;
}

/* ============================================================
   96. EVAL FLOW (8.6.1 Alur Evaluasi Kuartal)
   ============================================================ */
.eval-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 18px 14px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.04) 0%,
        rgba(16, 185, 129, 0.02) 100%);
    border: 2px solid rgba(4, 120, 87, 0.12);
    border-radius: 14px;
    margin-bottom: 20px;
}

.ef-step {
    text-align: center;
    padding: 8px;
}

.ef-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 19px;
    margin: 0 auto 8px;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

.ef-green { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.ef-blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.ef-amber { background: linear-gradient(135deg, var(--accent), #b45309); }
.ef-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }

.ef-content { text-align: center; }

.ef-title {
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 3px;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.ef-desc {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.4;
}

.ef-arrow {
    color: var(--primary);
    font-size: 16px;
    opacity: 0.5;
    text-align: center;
}

/* ============================================================
   97. SECURITY GRID (8.7.1 SOP Keamanan)
   ============================================================ */
.security-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.security-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
}

.security-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(4, 120, 87, 0.25);
}

.security-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.1),
        rgba(16, 185, 129, 0.15));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 18px;
}

.security-content { flex: 1; }

.security-name {
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 4px;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.security-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ============================================================
   98. EMERGENCY FLOW (8.7.3 SOP Tanggap Darurat)
   ============================================================ */
.emergency-flow {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.emergency-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 16px;
    background: linear-gradient(135deg,
        rgba(220, 38, 38, 0.04) 0%,
        rgba(220, 38, 38, 0.02) 100%);
    border: 1px solid rgba(220, 38, 38, 0.15);
    border-left: 4px solid #dc2626;
    border-radius: 10px;
    transition: all 0.22s ease;
}

.emergency-item:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 14px -6px rgba(220, 38, 38, 0.2);
}

.emg-num {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    background: #dc2626;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.25);
    margin-top: 2px;
}

.emg-content { flex: 1; }

.emg-title {
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 700;
    color: #991b1b;
    margin-bottom: 3px;
    line-height: 1.3;
}

.emg-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.55;
}

/* ============================================================
   99. RESPONSIVE untuk bab-8
   ============================================================ */
@media (max-width: 900px) {
    .principles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sop-overview {
        grid-template-columns: repeat(2, 1fr);
    }

    .teacher-stages {
        grid-template-columns: repeat(3, 1fr);
    }

    .eval-flow {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ef-arrow {
        transform: rotate(90deg);
        padding: 4px 0;
    }

    .reward-grid,
    .prohibition-grid,
    .security-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .principles-grid,
    .sop-overview,
    .teacher-stages {
        grid-template-columns: 1fr;
    }

    .sop-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .sop-header-info { text-align: center; }

    .rt-item {
        flex-direction: column;
        gap: 8px;
    }

    .rt-time {
        align-self: flex-start;
    }

    .flow-step {
        padding: 10px 12px;
        gap: 10px;
    }

    .flow-num {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .sop-name {
        font-size: 12px;
    }
}

/* ============================================================
   100. PRINT — SOP khusus
   ============================================================ */
@media print {
    .principle-item,
    .sop-card,
    .flow-step,
    .stage-item,
    .reward-item,
    .rt-item,
    .prohibition-item,
    .ef-step,
    .security-item,
    .emergency-item {
        break-inside: avoid;
    }

    .sop-header,
    .eval-flow {
        break-after: avoid;
    }

    .principle-item:hover,
    .sop-card:hover,
    .flow-step:hover,
    .stage-item:hover,
    .reward-item:hover,
    .rt-item:hover,
    .prohibition-item:hover,
    .security-item:hover,
    .emergency-item:hover {
        transform: none;
    }

    .table-custom tr {
        break-inside: avoid;
    }
}

/* ============================================================
   101. ASSUMPTION GRID (9.1 Asumsi Penyusunan)
   ============================================================ */
.assumption-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}

.assumption-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.04) 0%,
        rgba(16, 185, 129, 0.02) 100%);
    border: 1px solid rgba(4, 120, 87, 0.12);
    border-radius: 10px;
    transition: all 0.22s ease;
}

.assumption-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -6px rgba(4, 120, 87, 0.2);
    border-color: var(--primary);
}

.assumption-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 15px;
    box-shadow: 0 3px 8px rgba(4, 120, 87, 0.22);
}

.assumption-content { flex: 1; min-width: 0; }

.assumption-name {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 2px;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.assumption-desc {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ============================================================
   102. BUDGET CATEGORIES (9.1.1 Kategori Anggaran)
   ============================================================ */
.budget-categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.bc-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 14px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.bc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.bc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.bc-invest::before { background: linear-gradient(90deg, var(--primary), var(--primary-light)); }
.bc-oper::before { background: linear-gradient(90deg, #3b82f6, #1d4ed8); }
.bc-cont::before { background: linear-gradient(90deg, var(--accent), #b45309); }
.bc-total::before { background: linear-gradient(90deg, var(--primary-dark), var(--primary)); }

.bc-invest .bc-icon { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.bc-oper .bc-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.bc-cont .bc-icon { background: linear-gradient(135deg, var(--accent), #b45309); }
.bc-total .bc-icon { background: linear-gradient(135deg, var(--primary-dark), #042f23); }

.bc-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    margin: 0 auto 10px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.22);
}

.bc-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    font-family: var(--font-heading);
}

.bc-value {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.bc-desc {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ============================================================
   103. RAB TABLE (9.2 s/d 9.5 Tabel Anggaran)
   ============================================================ */
.rab-table {
    font-size: 11.5px !important;
}

.rab-table th {
    font-size: 10.5px !important;
    padding: 9px 10px !important;
    line-height: 1.3;
}

.rab-table td {
    font-size: 11.5px !important;
    padding: 8px 10px !important;
    vertical-align: middle;
    line-height: 1.4;
}

.rab-table td:first-child {
    font-weight: 700;
    color: var(--primary-dark);
    text-align: center;
}

.rab-table td:last-child,
.rab-table td:nth-last-child(2),
.rab-table td:nth-last-child(3) {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--primary-dark);
    text-align: right;
}

.rab-table tr:hover td {
    background: rgba(4, 120, 87, 0.03);
}

.rab-table .total-row td {
    background: linear-gradient(90deg,
        rgba(4, 120, 87, 0.1) 0%,
        rgba(16, 185, 129, 0.06) 100%) !important;
    color: var(--primary-dark) !important;
    font-weight: 800;
    font-size: 12px !important;
    border-top: 2px solid var(--primary);
    padding: 10px !important;
}

.rab-table .subtotal-row td {
    background: rgba(4, 120, 87, 0.05) !important;
    color: var(--primary-dark) !important;
    font-weight: 700;
    font-size: 11.5px !important;
    border-top: 1px solid rgba(4, 120, 87, 0.2);
}

/* ============================================================
   104. COST BREAKDOWN (9.5.2 Visualisasi biaya operasional)
   ============================================================ */
.cost-breakdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 6px;
}

.cb-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all 0.22s ease;
    position: relative;
    overflow: hidden;
}

.cb-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.cb-listrik::before { background: linear-gradient(90deg, #f59e0b, #b45309); }
.cb-internet::before { background: linear-gradient(90deg, #3b82f6, #1d4ed8); }
.cb-konsumsi::before { background: linear-gradient(90deg, var(--primary), var(--primary-light)); }
.cb-lain::before { background: linear-gradient(90deg, #8b5cf6, #6d28d9); }

.cb-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.cb-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    margin: 0 auto 8px;
}

.cb-listrik .cb-icon { background: linear-gradient(135deg, #f59e0b, #b45309); }
.cb-internet .cb-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.cb-konsumsi .cb-icon { background: linear-gradient(135deg, var(--primary), var(--primary-light)); }
.cb-lain .cb-icon { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }

.cb-name {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 4px;
    letter-spacing: -0.005em;
}

.cb-value {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 4px;
}

.cb-pct {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-muted);
    background: rgba(226, 232, 240, 0.5);
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.04em;
}

/* ============================================================
   105. RECAP TABLE (9.6 Rekapitulasi Total)
   ============================================================ */
.recap-table {
    font-size: 12px !important;
}

.recap-table th {
    font-size: 11px !important;
    padding: 10px 12px !important;
}

.recap-table td {
    font-size: 12px !important;
    padding: 9px 12px !important;
    vertical-align: middle;
}

.recap-table td:first-child {
    color: var(--primary);
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: 0.02em;
}

.recap-table td:last-child {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--primary-dark);
    text-align: right;
}

.recap-table tr:hover td {
    background: rgba(4, 120, 87, 0.03);
}

/* ============================================================
   106. FUNDING GRID (9.7 Sumber Pendanaan)
   ============================================================ */
.funding-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.funding-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 14px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.funding-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.funding-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.funding-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    margin: 0 auto 10px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.25);
}

.funding-name {
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 8px;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.funding-pct {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 2px;
    letter-spacing: -0.01em;
}

.funding-value {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 8px;
    letter-spacing: -0.005em;
}

.funding-desc {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.5;
    padding-top: 8px;
    border-top: 1px dashed rgba(4, 120, 87, 0.15);
}

/* ============================================================
   107. RESPONSIVE untuk bab-9
   ============================================================ */
@media (max-width: 900px) {
    .assumption-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .budget-categories,
    .funding-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cost-breakdown {
        grid-template-columns: repeat(2, 1fr);
    }

    .rab-table,
    .recap-table {
        font-size: 10px !important;
    }

    .rab-table th,
    .rab-table td,
    .recap-table th,
    .recap-table td {
        padding: 6px 7px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 480px) {
    .assumption-grid,
    .budget-categories,
    .funding-grid,
    .cost-breakdown {
        grid-template-columns: 1fr;
    }

    .rab-table,
    .recap-table {
        font-size: 9px !important;
    }

    .rab-table th,
    .rab-table td,
    .recap-table th,
    .recap-table td {
        padding: 5px 5px !important;
        font-size: 9px !important;
    }

    .bc-value {
        font-size: 15px;
    }
}

/* ============================================================
   108. PRINT — RAB khusus
   ============================================================ */
@media print {
    .assumption-item,
    .bc-card,
    .funding-card,
    .cb-card {
        break-inside: avoid;
    }

    .rab-table tr,
    .recap-table tr {
        break-inside: avoid;
    }

    .assumption-item:hover,
    .bc-card:hover,
    .funding-card:hover,
    .cb-card:hover {
        transform: none;
    }
}

/* ============================================================
   109. ROADMAP TIMELINE (10.1 Peta Jalan)
   ============================================================ */
.roadmap-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.roadmap-item {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.roadmap-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary), var(--primary-light));
}

.rm-year-1::before { background: linear-gradient(180deg, var(--primary), var(--primary-light)); }
.rm-year-2::before { background: linear-gradient(180deg, #3b82f6, #1d4ed8); }
.rm-year-3::before { background: linear-gradient(180deg, var(--accent), #b45309); }
.rm-year-4::before { background: linear-gradient(180deg, #8b5cf6, #6d28d9); }
.rm-year-5::before { background: linear-gradient(180deg, #dc2626, #991b1b); }

.roadmap-item:hover {
    transform: translateX(6px);
    box-shadow: var(--shadow-md);
    border-color: rgba(4, 120, 87, 0.25);
}

.rm-marker {
    flex-shrink: 0;
    width: 90px;
    text-align: center;
    padding: 8px 6px;
    border-radius: 10px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.06),
        rgba(16, 185, 129, 0.03));
    border: 1px solid rgba(4, 120, 87, 0.15);
}

.rm-year-1 .rm-marker { background: linear-gradient(135deg, rgba(4, 120, 87, 0.08), rgba(16, 185, 129, 0.04)); border-color: rgba(4, 120, 87, 0.2); }
.rm-year-2 .rm-marker { background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.03)); border-color: rgba(59, 130, 246, 0.2); }
.rm-year-3 .rm-marker { background: linear-gradient(135deg, rgba(217, 119, 6, 0.08), rgba(217, 119, 6, 0.03)); border-color: rgba(217, 119, 6, 0.2); }
.rm-year-4 .rm-marker { background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(139, 92, 246, 0.03)); border-color: rgba(139, 92, 246, 0.2); }
.rm-year-5 .rm-marker { background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(220, 38, 38, 0.03)); border-color: rgba(220, 38, 38, 0.2); }

.rm-year {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-dark);
    line-height: 1;
    letter-spacing: -0.01em;
    margin-bottom: 3px;
}

.rm-year-2 .rm-year { color: #1d4ed8; }
.rm-year-3 .rm-year { color: #b45309; }
.rm-year-4 .rm-year { color: #6d28d9; }
.rm-year-5 .rm-year { color: #991b1b; }

.rm-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rm-content { flex: 1; }

.rm-title {
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 3px;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.rm-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.55;
}

/* ============================================================
   110. YEAR CARD (10.2 Target Tahunan per Tahun)
   ============================================================ */
.year-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
    transition: all 0.25s ease;
}

.year-card:hover {
    box-shadow: var(--shadow-md);
}

.year-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.year-head::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.year-1 .year-head { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.year-2 .year-head { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.year-3 .year-head { background: linear-gradient(135deg, var(--accent), #b45309); }
.year-4 .year-head { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.year-5 .year-head { background: linear-gradient(135deg, #dc2626, #991b1b); }

.year-num {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
    position: relative;
    z-index: 1;
}

.year-label {
    flex: 1;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    z-index: 1;
    letter-spacing: 0.02em;
}

.year-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.year-body {
    padding: 18px 20px;
}

.year-targets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.target-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.04) 0%,
        rgba(16, 185, 129, 0.02) 100%);
    border: 1px solid rgba(4, 120, 87, 0.1);
    border-radius: 10px;
}

.target-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    box-shadow: 0 3px 8px rgba(4, 120, 87, 0.2);
}

.target-content { flex: 1; min-width: 0; }

.target-name {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.target-value {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    color: var(--primary-dark);
    line-height: 1.1;
    letter-spacing: -0.005em;
}

.year-milestones {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px dashed rgba(4, 120, 87, 0.15);
}

.milestone-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 11.5px;
    color: var(--text-main);
    line-height: 1.5;
}

.milestone-line i {
    color: var(--primary);
    font-size: 12px;
    margin-top: 3px;
    flex-shrink: 0;
}

/* ============================================================
   111. ROADMAP TABLE (10.3 Tabel Komprehensif)
   ============================================================ */
.roadmap-table {
    font-size: 11px !important;
}

.roadmap-table th {
    font-size: 10.5px !important;
    padding: 9px 6px !important;
    text-align: center;
    line-height: 1.3;
}

.roadmap-table th:first-child {
    text-align: left;
    padding-left: 14px !important;
}

.roadmap-table td {
    font-size: 11px !important;
    padding: 8px 6px !important;
    text-align: center;
    vertical-align: middle;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--primary-dark);
}

.roadmap-table td:first-child {
    text-align: left;
    padding-left: 14px !important;
    color: var(--text-main);
    font-weight: 600;
}

.roadmap-table tr:hover td {
    background: rgba(4, 120, 87, 0.03);
}

/* ============================================================
   112. EXPANSION GRID (10.4 Ekspansi Cabang)
   ============================================================ */
.expansion-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.expansion-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 14px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.expansion-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.expansion-potential::before {
    background: linear-gradient(90deg, var(--accent), #f59e0b);
    opacity: 0.5;
}

.expansion-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.expansion-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    margin: 0 auto 10px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.22);
}

.expansion-potential .expansion-icon {
    background: linear-gradient(135deg, var(--accent), #b45309);
}

.expansion-location {
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 8px;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.expansion-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
}

.status-active {
    background: rgba(4, 120, 87, 0.12);
    color: var(--primary);
}

.status-plan {
    background: rgba(217, 119, 6, 0.12);
    color: var(--accent);
}

.expansion-desc {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.5;
    padding-top: 8px;
    border-top: 1px dashed rgba(4, 120, 87, 0.15);
}

/* ============================================================
   113. INCUBATION FLOW (10.5 Inkubasi Startup)
   ============================================================ */
.incubation-flow {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.incu-step {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.incu-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.incu-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.incu-num {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 800;
    color: rgba(4, 120, 87, 0.15);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 6px;
}

.incu-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 17px;
    margin: 0 auto 10px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.22);
}

.incu-title {
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 5px;
    letter-spacing: -0.005em;
    line-height: 1.25;
}

.incu-desc {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ============================================================
   114. LSP TABLE (10.6 Roadmap LSP)
   ============================================================ */
.lsp-table {
    font-size: 11.5px !important;
}

.lsp-table td:first-child {
    text-align: center;
    color: var(--primary);
    font-family: var(--font-heading);
    font-weight: 800;
}

.lsp-table tr:hover td {
    background: rgba(4, 120, 87, 0.03);
}

/* ============================================================
   115. DAKWAH TARGETS (10.7 Dakwah Digital)
   ============================================================ */
.dakwah-targets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.dt-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.04) 0%,
        rgba(16, 185, 129, 0.02) 100%);
    border: 1px solid rgba(4, 120, 87, 0.12);
    border-radius: 12px;
    transition: all 0.25s ease;
}

.dt-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px -6px rgba(4, 120, 87, 0.2);
    border-color: var(--primary);
}

.dt-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.22);
}

.dt-name {
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 4px;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.dt-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ============================================================
   116. KPI ROADMAP (10.8 Indikator Keberhasilan)
   ============================================================ */
.kpi-roadmap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.kr-item {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 14px 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.kr-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
}

.kr-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.kr-num {
    position: absolute;
    top: 10px;
    right: 12px;
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    color: rgba(4, 120, 87, 0.08);
    line-height: 1;
    letter-spacing: -0.02em;
}

.kr-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 10px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.22);
    position: relative;
    z-index: 1;
}

.kr-content { position: relative; z-index: 1; }

.kr-name {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.kr-value {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-dark);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: 5px;
}

.kr-desc {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.45;
}

/* ============================================================
   117. RESPONSIVE untuk bab-10
   ============================================================ */
@media (max-width: 900px) {
    .year-targets {
        grid-template-columns: repeat(2, 1fr);
    }

    .expansion-grid,
    .kpi-roadmap {
        grid-template-columns: repeat(2, 1fr);
    }

    .incubation-flow {
        grid-template-columns: repeat(3, 1fr);
    }

    .dakwah-targets {
        grid-template-columns: repeat(2, 1fr);
    }

    .roadmap-table {
        font-size: 9.5px !important;
    }

    .roadmap-table th,
    .roadmap-table td {
        padding: 6px 4px !important;
        font-size: 9.5px !important;
    }

    .roadmap-table th:first-child,
    .roadmap-table td:first-child {
        padding-left: 8px !important;
    }
}

@media (max-width: 480px) {
    .year-targets,
    .expansion-grid,
    .kpi-roadmap,
    .incubation-flow,
    .dakwah-targets {
        grid-template-columns: 1fr;
    }

    .roadmap-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .rm-marker {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 14px;
    }

    .rm-year { margin-bottom: 0; }

    .roadmap-table {
        font-size: 8.5px !important;
    }

    .roadmap-table th,
    .roadmap-table td {
        padding: 5px 3px !important;
        font-size: 8.5px !important;
    }
}

/* ============================================================
   118. PRINT — Roadmap khusus
   ============================================================ */
@media print {
    .roadmap-item,
    .year-card,
    .expansion-card,
    .incu-step,
    .dt-card,
    .kr-item,
    .target-item {
        break-inside: avoid;
    }

    .roadmap-table tr,
    .lsp-table tr {
        break-inside: avoid;
    }

    .roadmap-item:hover,
    .year-card:hover,
    .expansion-card:hover,
    .incu-step:hover,
    .dt-card:hover,
    .kr-item:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }
}

/* ============================================================
   119. CONCLUSION LIST (11.1 Kesimpulan)
   ============================================================ */
.conclusion-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.conclusion-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.22s ease;
}

.conclusion-item:hover {
    transform: translateX(6px);
    box-shadow: var(--shadow-md);
    border-left-color: var(--accent);
}

.conclusion-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.25);
    margin-top: 2px;
}

.conclusion-content { flex: 1; }

.conclusion-title {
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 4px;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.conclusion-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.6;
}

.conclusion-desc strong {
    color: var(--primary-dark);
    font-weight: 700;
}

/* ============================================================
   120. EXPECTATION GRID (11.2 Harapan & Permohonan)
   ============================================================ */
.expectation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}

.expectation-card {
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.03) 0%,
        rgba(16, 185, 129, 0.01) 100%);
    border: 1px solid rgba(4, 120, 87, 0.15);
    border-radius: 12px;
    padding: 16px 16px 14px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

.expectation-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.expectation-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px -8px rgba(4, 120, 87, 0.25);
    border-color: var(--primary);
}

.expectation-card:hover::before { opacity: 1; }

.expectation-icon {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 19px;
    margin: 0 auto 10px;
    box-shadow: 0 5px 12px rgba(4, 120, 87, 0.25);
}

.expectation-num {
    position: absolute;
    top: 8px;
    right: 12px;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    color: rgba(4, 120, 87, 0.08);
    letter-spacing: -0.02em;
    line-height: 1;
}

.expectation-title {
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 6px;
    line-height: 1.3;
    letter-spacing: -0.005em;
    position: relative;
    z-index: 1;
}

.expectation-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.55;
    position: relative;
    z-index: 1;
}

.expectation-desc strong {
    color: var(--primary-dark);
    font-weight: 700;
}

/* ============================================================
   121. QUOTE BLOCK (Hadits/Ayat di 11.2)
   ============================================================ */
.quote-block {
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.06) 0%,
        rgba(16, 185, 129, 0.03) 100%);
    border: 2px solid var(--primary);
    border-radius: 14px;
    padding: 22px 26px;
    text-align: center;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
}

.quote-block::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(217, 119, 6, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.quote-block-icon {
    width: 44px;
    height: 44px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 17px;
    margin: 0 auto 14px;
    box-shadow: 0 6px 14px rgba(4, 120, 87, 0.3);
    position: relative;
    z-index: 1;
}

.quote-block-text {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-dark);
    line-height: 1.6;
    margin-bottom: 10px;
    letter-spacing: -0.005em;
    position: relative;
    z-index: 1;
}

.quote-block-source {
    font-size: 12px;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.02em;
    position: relative;
    z-index: 1;
}

/* ============================================================
   122. CLOSING DUA (11.3 Penutup)
   ============================================================ */
.closing-dua {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 14px;
    padding: 26px 30px;
    text-align: center;
    color: #ffffff;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}

.closing-dua::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.dua-arabic {
    font-family: var(--font-arabic);
    font-size: 26px;
    color: var(--accent-light);
    margin-bottom: 14px;
    letter-spacing: 0.02em;
    direction: rtl;
    position: relative;
    z-index: 1;
    line-height: 1.7;
    text-shadow: 0 2px 12px rgba(217, 119, 6, 0.35);
}

.dua-translation {
    font-size: 13.5px;
    color: #e2e8f0;
    line-height: 1.65;
    margin-bottom: 10px;
    font-style: italic;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.dua-source {
    font-size: 12px;
    color: var(--accent-light);
    font-weight: 700;
    letter-spacing: 0.04em;
    position: relative;
    z-index: 1;
}

/* Closing Wasalam */
.closing-wasalam {
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.06) 0%,
        rgba(217, 119, 6, 0.04) 100%);
    border: 2px solid var(--accent);
    border-radius: 14px;
    padding: 22px 26px;
    text-align: center;
    margin-bottom: 18px;
}

.wasalam-arabic {
    font-family: var(--font-arabic);
    font-size: 24px;
    color: var(--primary-dark);
    margin-bottom: 10px;
    direction: rtl;
    line-height: 1.6;
}

.wasalam-translation {
    font-size: 13.5px;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ============================================================
   123. ENDORSEMENT / LEMBAR PENGESAHAN (11.4)
   ============================================================ */
.endorsement-section {
    margin-bottom: 22px;
    padding: 18px 20px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.03) 0%,
        rgba(16, 185, 129, 0.01) 100%);
    border: 1px solid rgba(4, 120, 87, 0.15);
    border-radius: 14px;
}

.endorsement-approve {
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.06) 0%,
        rgba(217, 119, 6, 0.04) 100%);
    border: 2px solid var(--primary);
}

.endorsement-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 800;
    color: var(--primary-dark);
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(4, 120, 87, 0.2);
}

.endorsement-title i {
    color: var(--primary);
    font-size: 14px;
}

.signature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.signature-grid-single {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
}

.signature-card {
    text-align: center;
    padding: 12px 10px;
}

.signature-card-featured {
    padding: 16px 12px;
}

.signature-role {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.signature-space {
    height: 68px;
    position: relative;
}

.signature-space::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 1px;
    background: rgba(4, 120, 87, 0.15);
    border-bottom: 1px dashed rgba(4, 120, 87, 0.25);
    background: none;
}

.signature-name-line {
    height: 1px;
    background: var(--text-main);
    width: 220px;
    margin: 0 auto 8px;
    opacity: 0.4;
}

.signature-name {
    font-family: var(--font-heading);
    font-size: 12.5px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    line-height: 1.3;
    font-weight: 500;
}

.signature-name-bold {
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 13px;
}

.signature-title {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.signature-title-bold {
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 11.5px;
}

.signature-stamp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 5px 12px;
    background: rgba(4, 120, 87, 0.08);
    border: 1px dashed var(--primary);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.signature-stamp i {
    color: var(--accent);
    font-size: 11px;
}

/* ============================================================
   124. DOCUMENT INFO (Informasi Dokumen)
   ============================================================ */
.document-info {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 22px;
}

.di-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
}

.di-item {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(4, 120, 87, 0.15);
}

.di-item:last-child,
.di-item:nth-last-child(2) {
    border-bottom: none;
}

.di-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.di-value {
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1.4;
}

.di-status {
    display: inline-block;
    background: rgba(217, 119, 6, 0.12);
    color: var(--accent);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    letter-spacing: 0.04em;
    width: fit-content;
}

/* ============================================================
   125. FINAL QUOTE & MESSAGE (Penutup Akhir)
   ============================================================ */
.final-quote {
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.05) 0%,
        rgba(217, 119, 6, 0.03) 100%);
    border: 2px solid var(--primary);
    border-radius: 14px;
    padding: 22px 26px;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.final-quote::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(4, 120, 87, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.final-quote-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
    margin: 0 auto 14px;
    box-shadow: 0 6px 14px rgba(4, 120, 87, 0.3);
    position: relative;
    z-index: 1;
}

.final-quote-text {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-dark);
    line-height: 1.6;
    margin-bottom: 12px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: -0.005em;
    position: relative;
    z-index: 1;
}

.final-quote-source {
    font-size: 12.5px;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.04em;
    position: relative;
    z-index: 1;
}

/* Final Message Block */
.final-message {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 14px;
    padding: 22px 26px;
    text-align: center;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.final-message::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 85%, rgba(16, 185, 129, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(251, 191, 36, 0.15) 0%, transparent 40%);
    pointer-events: none;
}

.final-message-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    color: var(--accent-light);
    letter-spacing: 0.06em;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.final-message-title i {
    font-size: 16px;
    color: var(--accent-light);
}

.final-message-sub {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
    position: relative;
    z-index: 1;
}

.final-message-year {
    font-size: 11.5px;
    color: #a7f3d0;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 1;
}

/* ============================================================
   126. RESPONSIVE untuk bab-11
   ============================================================ */
@media (max-width: 900px) {
    .expectation-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .di-grid {
        grid-template-columns: 1fr;
    }

    .signature-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dua-arabic {
        font-size: 22px;
    }

    .wasalam-arabic {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .expectation-grid {
        grid-template-columns: 1fr;
    }

    .conclusion-item {
        padding: 12px 14px;
        gap: 12px;
    }

    .conclusion-num {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .dua-arabic {
        font-size: 18px;
    }

    .dua-translation,
    .wasalam-translation {
        font-size: 12px;
    }

    .final-message-title {
        flex-direction: column;
        gap: 6px;
        font-size: 12px;
        text-align: center;
    }

    .final-quote-text {
        font-size: 12.5px;
    }

    .signature-name-line {
        width: 180px;
    }

    .signature-space {
        height: 60px;
    }
}

/* ============================================================
   127. PRINT — Penutup khusus
   ============================================================ */
@media print {
    .conclusion-item,
    .expectation-card,
    .quote-block,
    .closing-dua,
    .closing-wasalam,
    .signature-card,
    .di-item,
    .final-quote,
    .final-message {
        break-inside: avoid;
    }

    .endorsement-section,
    .document-info {
        break-inside: avoid;
    }

    .conclusion-item:hover,
    .expectation-card:hover {
        transform: none;
    }

    /* Sembunyikan navigasi saat print */
    .chapter-nav {
        display: none !important;
    }
}

/* ============================================================
   128. ATTACHMENT LIST (Daftar Lampiran)
   ============================================================ */
.attachment-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-main);
    box-shadow: var(--shadow-sm);
    transition: all 0.22s ease;
}

.attachment-item:hover {
    border-color: var(--primary);
    transform: translateX(6px);
    box-shadow: var(--shadow-md);
}

.attachment-code {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.22);
}

.attachment-content { flex: 1; min-width: 0; }

.attachment-title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 2px;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.attachment-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.45;
}

.attachment-arrow {
    color: var(--primary);
    font-size: 14px;
    opacity: 0.4;
    transition: all 0.22s ease;
}

.attachment-item:hover .attachment-arrow {
    opacity: 1;
    transform: translateY(3px);
}

/* ============================================================
   129. ATTACHMENT HEADER (Header Setiap Lampiran)
   ============================================================ */
.attachment-header {
    text-align: center;
    padding: 18px 20px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.05) 0%,
        rgba(16, 185, 129, 0.02) 100%);
    border: 1px solid rgba(4, 120, 87, 0.15);
    border-radius: 14px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.attachment-header::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(217, 119, 6, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.attachment-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #ffffff;
    padding: 5px 16px;
    border-radius: 20px;
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.15em;
    margin-bottom: 12px;
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.25);
    position: relative;
    z-index: 1;
}

.attachment-main-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-dark);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
}

.attachment-main-desc {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.5;
    font-style: italic;
    position: relative;
    z-index: 1;
}

/* ============================================================
   130. SYLLABUS TABLE (Lampiran A)
   ============================================================ */
.syllabus-table {
    font-size: 10.5px !important;
}

.syllabus-table th {
    font-size: 10px !important;
    padding: 8px 8px !important;
    line-height: 1.3;
}

.syllabus-table td {
    font-size: 10.5px !important;
    padding: 7px 8px !important;
    vertical-align: top;
    line-height: 1.4;
}

.syllabus-table td:first-child {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--primary);
    text-align: center;
}

.syllabus-table tr:hover td {
    background: rgba(4, 120, 87, 0.03);
}

/* ============================================================
   131. CALENDAR TABLE (Lampiran B)
   ============================================================ */
.calendar-table {
    font-size: 11px !important;
}

.calendar-table td:first-child {
    font-weight: 700;
    color: var(--primary);
    font-family: var(--font-heading);
}

.calendar-table tr:hover td {
    background: rgba(4, 120, 87, 0.03);
}

/* ============================================================
   132. SOFTWARE GRID (Lampiran C)
   ============================================================ */
.software-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.sw-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    transition: all 0.22s ease;
}

.sw-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.sw-cat {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(4, 120, 87, 0.2);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.sw-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sw-list span {
    display: inline-block;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.08) 0%,
        rgba(16, 185, 129, 0.05) 100%);
    color: var(--primary-dark);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid rgba(4, 120, 87, 0.12);
}

/* ============================================================
   133. SOP LAB HEADER (Lampiran D)
   ============================================================ */
.sop-lab-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #ffffff;
    border-radius: 12px;
    margin-bottom: 18px;
    box-shadow: 0 8px 20px -8px rgba(4, 120, 87, 0.4);
}

.sop-lab-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #ffffff;
    backdrop-filter: blur(8px);
}

.sop-lab-info { flex: 1; }

.sop-lab-code {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 3px;
}

.sop-lab-title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

/* ============================================================
   134. FORM STYLES (Lampiran E)
   ============================================================ */
.form-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 16px 20px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.06) 0%,
        rgba(16, 185, 129, 0.03) 100%);
    border: 2px solid var(--primary);
    border-radius: 12px;
    margin-bottom: 18px;
}

.form-header-text { flex: 1; }

.form-header-title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
    color: var(--primary-dark);
    letter-spacing: 0.02em;
    margin-bottom: 3px;
}

.form-header-sub {
    font-size: 11.5px;
    color: var(--text-main);
    margin-bottom: 3px;
}

.form-header-year {
    font-size: 10.5px;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.form-header-photo {
    flex-shrink: 0;
    width: 80px;
    height: 110px;
    border: 2px dashed var(--primary);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--primary);
    background: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.form-header-photo i { font-size: 22px; opacity: 0.5; }

.form-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    margin-bottom: 18px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-dark);
    letter-spacing: 0.02em;
}

.form-line {
    height: 28px;
    border-bottom: 1.5px dotted rgba(4, 120, 87, 0.35);
}

.checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    padding: 14px 18px;
    background: rgba(4, 120, 87, 0.04);
    border-radius: 10px;
    border: 1px solid rgba(4, 120, 87, 0.12);
    margin-bottom: 18px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text-main);
    line-height: 1.4;
}

.checkbox-item i {
    color: var(--primary);
    font-size: 14px;
}

/* Form Declaration */
.form-declaration {
    background: linear-gradient(135deg,
        rgba(217, 119, 6, 0.04) 0%,
        rgba(251, 191, 36, 0.02) 100%);
    border: 1px dashed var(--accent);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 18px;
}

.form-declaration-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

.form-declaration-title i {
    font-size: 13px;
}

.form-declaration-text {
    font-size: 11.5px;
    color: var(--text-main);
    line-height: 1.7;
    text-align: justify;
    margin-bottom: 16px;
}

.form-declaration-text strong {
    color: var(--primary-dark);
    font-weight: 700;
}

.form-signature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 12px;
}

.form-sig-item {
    text-align: center;
}

.form-sig-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-sig-space { height: 44px; }

.form-sig-line {
    height: 1px;
    background: var(--text-main);
    opacity: 0.4;
    margin-bottom: 6px;
}

.form-sig-name {
    font-size: 10.5px;
    color: var(--text-muted);
    font-family: var(--font-heading);
    letter-spacing: 0.02em;
}

/* ============================================================
   135. MoU STYLES (Lampiran F)
   ============================================================ */
.mou-header {
    text-align: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: #ffffff;
    border-radius: 12px;
    margin-bottom: 18px;
    box-shadow: 0 8px 20px -8px rgba(4, 120, 87, 0.4);
}

.mou-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.mou-subtitle {
    font-size: 12px;
    color: #a7f3d0;
    margin-bottom: 6px;
}

.mou-number {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.75);
    font-style: italic;
    letter-spacing: 0.02em;
}

.mou-party {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.mou-party-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.08) 0%,
        rgba(16, 185, 129, 0.04) 100%);
    border-bottom: 1px solid rgba(4, 120, 87, 0.12);
}

.mou-party-num {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    color: var(--primary-dark);
    letter-spacing: 0.08em;
}

.mou-party-role {
    font-size: 10.5px;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.mou-party-body {
    padding: 12px 16px;
}

.mou-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 11.5px;
}

.mou-field:last-child { margin-bottom: 0; }

.mou-field-label {
    flex-shrink: 0;
    width: 80px;
    color: var(--text-muted);
    font-weight: 600;
}

.mou-field-line {
    flex: 1;
    border-bottom: 1.5px dotted rgba(4, 120, 87, 0.35);
    padding-bottom: 2px;
    color: var(--primary-dark);
    font-weight: 600;
    font-size: 11.5px;
}

.mou-obligation {
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.04) 0%,
        rgba(16, 185, 129, 0.02) 100%);
    border: 1px solid rgba(4, 120, 87, 0.12);
    border-radius: 12px;
    padding: 14px 18px;
}

.mou-obligation-title {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(4, 120, 87, 0.2);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.mou-obligation .custom-list li {
    font-size: 11px;
    margin-bottom: 6px;
    line-height: 1.5;
}

.mou-signature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed rgba(4, 120, 87, 0.25);
}

.mou-sig-col { text-align: center; }

.mou-sig-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--primary-dark);
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.mou-sig-space { height: 60px; }

.mou-sig-line {
    height: 1px;
    background: var(--text-main);
    opacity: 0.4;
    margin-bottom: 6px;
}

.mou-sig-name {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 3px;
    font-family: var(--font-heading);
}

.mou-sig-title {
    font-size: 10.5px;
    color: var(--primary);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ============================================================
   136. KPI TABLE (Lampiran G)
   ============================================================ */
.kpi-table {
    font-size: 10px !important;
}

.kpi-table th {
    font-size: 9.5px !important;
    padding: 8px 6px !important;
    line-height: 1.3;
}

.kpi-table td {
    font-size: 10px !important;
    padding: 6px 6px !important;
    vertical-align: middle;
    line-height: 1.4;
}

.kpi-table td:first-child,
.kpi-table td:last-child {
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--primary);
}

.kpi-table td:nth-child(2) strong {
    color: var(--primary-dark);
}

.kpi-table tr:hover td {
    background: rgba(4, 120, 87, 0.03);
}

/* ============================================================
   137. LETTERHEAD STYLES (Lampiran H)
   ============================================================ */
.letterhead {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--primary);
    position: relative;
}

.letterhead::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 120px;
    height: 3px;
    background: var(--accent);
}

.letterhead-logo {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.letterhead-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.letterhead-logo i {
    color: #ffffff;
    font-size: 30px;
}

.letterhead-text { flex: 1; text-align: center; }

.letterhead-org {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
    letter-spacing: 0.04em;
}

.letterhead-name {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-dark);
    letter-spacing: 0.03em;
    margin: 3px 0 5px;
}

.letterhead-address {
    font-size: 9.5px;
    color: var(--text-muted);
    line-height: 1.4;
}

.letter-meta {
    margin: 20px 0;
    padding: 0 10px;
}

.letter-meta-row {
    display: flex;
    gap: 10px;
    font-size: 11.5px;
    margin-bottom: 6px;
    line-height: 1.5;
}

.letter-meta-label {
    width: 80px;
    font-weight: 600;
    color: var(--text-main);
}

.letter-meta-colon {
    width: 10px;
    color: var(--text-muted);
}

.letter-meta-value {
    flex: 1;
    color: var(--text-main);
}

.letter-meta-value strong {
    color: var(--primary-dark);
}

.letter-body {
    padding: 0 10px;
}

.letter-body p {
    font-size: 11.5px;
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 12px;
    color: var(--text-main);
}

.letter-greeting {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 4px !important;
}

.letter-assalam {
    font-style: italic;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 16px !important;
}

.letter-wasalam {
    font-style: italic;
    color: var(--accent);
    font-weight: 600;
    margin-top: 16px;
}

.letter-signature {
    text-align: right;
    margin-top: 30px;
    padding-right: 30px;
}

.letter-sig-place {
    font-size: 11.5px;
    color: var(--text-main);
    line-height: 1.5;
    margin-bottom: 20px;
}

.letter-sig-role {
    font-size: 11.5px;
    color: var(--text-main);
    line-height: 1.5;
    margin-bottom: 6px;
}

.letter-sig-space { height: 60px; }

.letter-sig-line {
    width: 200px;
    height: 1px;
    background: var(--text-main);
    margin-left: auto;
    margin-bottom: 6px;
}

.letter-sig-name {
    font-size: 11px;
    color: var(--text-main);
    font-family: var(--font-heading);
    font-weight: 600;
    margin-bottom: 3px;
}

.letter-sig-nip {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================================
   138. RESPONSIVE untuk bab-12
   ============================================================ */
@media (max-width: 900px) {
    .software-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-fields,
    .checkbox-grid {
        grid-template-columns: 1fr;
    }

    .form-signature-row,
    .mou-signature {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .syllabus-table,
    .kpi-table,
    .calendar-table {
        font-size: 9px !important;
    }

    .syllabus-table th,
    .syllabus-table td,
    .kpi-table th,
    .kpi-table td,
    .calendar-table th,
    .calendar-table td {
        padding: 5px 5px !important;
        font-size: 9px !important;
    }
}

@media (max-width: 480px) {
    .software-grid {
        grid-template-columns: 1fr;
    }

    .attachment-item {
        padding: 10px 12px;
    }

    .attachment-code {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .attachment-main-title {
        font-size: 18px;
    }

    .letterhead {
        flex-direction: column;
        text-align: center;
    }

    .letterhead-text { text-align: center; }

    .letter-signature {
        text-align: center;
        padding-right: 0;
    }

    .letter-sig-line { margin-left: auto; margin-right: auto; }

    .syllabus-table,
    .kpi-table,
    .calendar-table {
        font-size: 8px !important;
    }

    .syllabus-table th,
    .syllabus-table td,
    .kpi-table th,
    .kpi-table td,
    .calendar-table th,
    .calendar-table td {
        padding: 4px 3px !important;
        font-size: 8px !important;
    }
}

/* ============================================================
   139. PRINT — Lampiran khusus
   ============================================================ */
@media print {
    .attachment-item,
    .sw-card,
    .form-declaration,
    .mou-party,
    .mou-obligation,
    .letterhead,
    .letter-signature,
    .form-header {
        break-inside: avoid;
    }

    .syllabus-table tr,
    .kpi-table tr,
    .calendar-table tr {
        break-inside: avoid;
    }

    .attachment-item:hover,
    .sw-card:hover {
        transform: none;
    }
}