/* Sistem warna resmi Dompet Dana Umat.
   Komposisi visual: 50% Warm White, 25% DDU Blue, 10% Pale Blue,
   7% Deep Blue, 5% Charcoal, dan 3% Soft Gold. */
:root {
    --ddu-font: "Metropolis", "Segoe UI", Arial, sans-serif;
    --ddu-primary: #0756D6;
    --ddu-deep: #063B9E;
    --ddu-action: #1769F5;
    --ddu-pale: #EAF2FF;
    --ddu-warm: #FAFAF7;
    --ddu-charcoal: #172033;
    --ddu-gold: #D4A84F;

    /* Hierarki tipografi DDU: satu skala untuk seluruh halaman publik dan admin. */
    --ddu-text-heading: var(--ddu-deep);
    --ddu-text-subheading: var(--ddu-charcoal);
    --ddu-text-body: rgba(23, 32, 51, .82);
    --ddu-text-muted: rgba(23, 32, 51, .64);
    --ddu-text-soft: rgba(23, 32, 51, .52);
    --ddu-text-on-dark: var(--ddu-warm);
    --ddu-text-on-dark-muted: rgba(250, 250, 247, .82);

    --font-xs: clamp(.74rem, .72rem + .08vw, .8rem);
    --font-sm: clamp(.86rem, .83rem + .12vw, .94rem);
    --font-body: clamp(1rem, .96rem + .16vw, 1.08rem);
    --font-lead: clamp(1.08rem, 1rem + .34vw, 1.28rem);
    --font-h4: clamp(1.08rem, 1rem + .35vw, 1.28rem);
    --font-h3: clamp(1.28rem, 1.12rem + .68vw, 1.62rem);
    --font-h2: clamp(1.85rem, 1.5rem + 1.55vw, 2.8rem);
    --font-display: clamp(2.45rem, 1.85rem + 3vw, 4.75rem);
    --line-body: 1.72;
    --line-heading: 1.14;

    --about-navy: var(--ddu-deep);
    --about-blue: var(--ddu-primary);
    --about-sky: var(--ddu-pale);
    --about-gold: var(--ddu-gold);
    --about-ink: var(--ddu-charcoal);
    --about-muted: rgba(23, 32, 51, .72);
    --about-line: rgba(7, 86, 214, .16);

    --cred-navy: var(--ddu-deep);
    --cred-blue: var(--ddu-primary);
    --cred-pale: var(--ddu-pale);
    --cred-text: rgba(23, 32, 51, .74);

    --admin-navy: var(--ddu-deep);
    --admin-blue: var(--ddu-primary);
    --admin-blue-dark: var(--ddu-deep);
    --admin-blue-soft: var(--ddu-pale);
    --admin-ink: var(--ddu-charcoal);
    --admin-muted: rgba(23, 32, 51, .68);
    --admin-line: rgba(7, 86, 214, .16);
    --admin-surface: var(--ddu-warm);
    --admin-bg: var(--ddu-pale);
    --admin-shadow: 0 12px 36px rgba(23, 32, 51, .09);
}

html {
    font-family: var(--ddu-font);
    color: var(--ddu-charcoal);
    background: var(--ddu-warm);
    scrollbar-color: var(--ddu-primary) var(--ddu-pale);
}

body,
body.home-page,
body.about-page,
body.article-page,
body.program-page,
body.credibility-page {
    font-family: var(--ddu-font);
    font-size: var(--font-body);
    font-weight: 400;
    line-height: var(--line-body);
    letter-spacing: -.003em;
    color: var(--ddu-text-body);
    background: var(--ddu-warm);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button,
input,
textarea,
select,
option,
.visual-editor,
[contenteditable="true"] {
    font-family: var(--ddu-font);
}

p,
li,
dd,
blockquote,
.post-full-content,
.program-page .mock-content {
    letter-spacing: 0;
    line-height: var(--line-body);
}

::selection {
    color: var(--ddu-warm);
    background: var(--ddu-primary);
}

::-webkit-scrollbar-track { background: var(--ddu-pale); }
::-webkit-scrollbar-thumb { background: var(--ddu-primary); border-color: var(--ddu-pale); }
::-webkit-scrollbar-thumb:hover { background: var(--ddu-deep); }

h1, h2, h3, h4, h5, h6,
.section-header h2,
.calculator-info h3,
.post-full-content h1,
.post-full-content h2,
.post-full-content h3,
.post-full-content h4,
.program-page .mock-content h1,
.program-page .mock-content h2,
.program-page .mock-content h3,
.program-page .mock-content h4 {
    font-family: var(--ddu-font);
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--ddu-charcoal);
}

h1,
.post-hero h1,
.detail-program-hero h1,
.about-hero h1,
.admin-page h1 {
    font-weight: 800;
    letter-spacing: -.042em;
    line-height: 1.08;
}

h2,
.section-header h2,
.admin-page h2 {
    font-weight: 700;
    letter-spacing: -.032em;
    line-height: 1.16;
}

h3,
h4,
.admin-page h3,
.admin-page h4 {
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.28;
}

.logo,
.nav-links a,
.btn,
button,
label,
strong,
.read-more,
.related-read-more {
    font-family: var(--ddu-font);
    font-weight: 600;
}

.logo,
.admin-brand,
.login-brand strong {
    font-weight: 700;
    letter-spacing: -.022em;
}

.section-kicker,
.eyebrow,
.card-kicker,
.post-category,
.sidebar-label,
.admin-eyebrow {
    font-family: var(--ddu-font);
    font-weight: 700;
    letter-spacing: .135em;
}

.stat-card-admin .number,
.analytics-summary-card strong,
.analytics-stat-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.025em;
}

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

:where(a, button, input, textarea, select):focus-visible {
    outline-color: var(--ddu-gold) !important;
}

.btn-primary,
.about-btn--primary,
.official-contact a,
.pagination-button.active,
.pagination-button:hover,
.btn-reset,
.admin-page .btn-primary {
    color: var(--ddu-warm);
    border-color: var(--ddu-action);
    background: var(--ddu-action);
}

.btn-primary:hover,
.about-btn--primary:hover,
.official-contact a:hover,
.admin-page .btn-primary:hover {
    color: var(--ddu-warm);
    border-color: var(--ddu-primary);
    background: var(--ddu-primary);
}

.btn-secondary,
.admin-page .btn-secondary {
    color: var(--ddu-primary);
    border-color: rgba(7, 86, 214, .34);
    background: var(--ddu-warm);
}

.btn-secondary:hover,
.admin-page .btn-secondary:hover {
    color: var(--ddu-warm);
    border-color: var(--ddu-primary);
    background: var(--ddu-primary);
}

.section-kicker,
.eyebrow,
.card-kicker,
.post-category,
.post-section-heading > span,
.post-summary > span,
.post-donation-cta > span,
.donation-method-label,
.credibility-hero .eyebrow,
.credibility-section .eyebrow,
.admin-workspace-kicker,
.admin-eyebrow {
    color: var(--ddu-primary) !important;
}

.home-page .hero-content .section-kicker,
.post-hero .post-category,
.detail-program-hero .section-kicker,
.cta-minimal .section-kicker,
.post-donation-cta > span,
.program-donation-cta > span,
.about-hero .eyebrow,
.credibility-hero .eyebrow,
.vision-card--primary .card-kicker,
.transparency-section .eyebrow {
    color: var(--ddu-warm) !important;
}

/* Navigasi dan footer memakai porsi Deep Blue. */
.main-header,
.main-header.scrolled,
.home-page .main-header,
.home-page .main-header.scrolled,
.about-page .main-header,
.article-page .main-header,
.article-page .main-header.scrolled,
.program-page .main-header,
.credibility-page .main-header {
    top: 0;
    right: 0;
    left: 0;
    width: auto;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    transform: none;
    border: 0;
    border-bottom: 1px solid rgba(250, 250, 247, .2);
    border-radius: 0;
    background: rgba(6, 59, 158, .96);
    box-shadow: 0 10px 30px rgba(23, 32, 51, .16);
}

body .main-header > .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 clamp(18px, 4vw, 72px);
}

.navbar {
    width: 100%;
    border-bottom: 0 !important;
}
.logo,
.logo:hover,
.logo:focus,
.logo:visited,
.nav-links a,
.close-menu-btn,
.mobile-socials__label { color: var(--ddu-warm); }
.nav-links a:hover,
.nav-links a.active { color: var(--ddu-warm); }
.nav-links a::after { background: var(--ddu-gold); }
.menu-toggle { border-color: rgba(250, 250, 247, .18); background: rgba(250, 250, 247, .08); }
.menu-toggle .bar { background: var(--ddu-warm); }

@media (max-width: 768px) {
    .nav-links,
    .home-page .nav-links,
    .about-page .nav-links {
        background:
            radial-gradient(circle at 92% 2%, rgba(212, 168, 79, .16), transparent 34%),
            linear-gradient(155deg, var(--ddu-deep), var(--ddu-primary));
    }
}

.footer {
    color: var(--ddu-pale);
    background: var(--ddu-deep);
}
.footer::before { background: var(--ddu-gold); }
.footer .footer-logo,
.footer .footer-heading,
.footer .footer-col > .footer-heading { color: var(--ddu-warm); }
.footer .footer-col > p,
.footer .contact-info,
.footer .footer-bottom p,
.footer .footer-policy-links a { color: var(--ddu-pale); }
.footer .social-icon { border-color: rgba(250, 250, 247, .2); background: rgba(250, 250, 247, .08); }
.footer-bottom { border-color: rgba(250, 250, 247, .16); }

/* Homepage: Warm White menjadi bidang utama, Pale Blue sebagai pemisah. */
.home-page .hero { background: var(--ddu-deep); }
.home-page .hero-overlay {
    display: none !important;
}
.home-page .hero-content h1,
.home-page .hero-content p {
    color: var(--ddu-warm);
    text-shadow: 0 2px 14px rgba(23, 32, 51, .95), 0 1px 3px rgba(23, 32, 51, .9);
}
.home-page .hero-content .section-kicker { color: var(--ddu-warm) !important; }

.home-page .hero-content {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.home-page .blog,
.home-page .gallery-section,
.home-page .contact { background: var(--ddu-warm); }
.home-page .about,
.home-page .about--photos,
.home-page .calculator { background: var(--ddu-pale); }
.home-page .video-promo { background: var(--ddu-deep); }
.home-page .video-overlay { background: linear-gradient(90deg, rgba(6, 59, 158, .92), rgba(7, 86, 214, .54)); }
.home-page .video-promo-content h2,
.home-page .video-promo-content p { color: var(--ddu-warm); }

.blog-card,
.calculator-card,
.contact-wrapper,
.gallery-item,
.home-proof__card,
.home-process__steps li {
    border-color: rgba(7, 86, 214, .15);
    background: var(--ddu-warm);
    box-shadow: 0 16px 42px rgba(23, 32, 51, .08);
}
.blog-card:hover,
.gallery-item:hover { box-shadow: 0 20px 48px rgba(7, 86, 214, .14); }
.blog-date,
.calculator-note,
.gallery-intro,
.about-content p { color: rgba(23, 32, 51, .7); }
.blog-content h3,
.blog-content h3 a,
.program-card-title,
.calculator-info h3 { color: var(--ddu-charcoal); }
.read-more,
.gallery-text h4,
.about-list strong { color: var(--ddu-primary); }
.gallery-overlay { background: linear-gradient(180deg, transparent 25%, rgba(6, 59, 158, .92)); }
.gallery-text h4,
.gallery-text p { color: var(--ddu-warm); }
.gallery-text h4::after { background: var(--ddu-gold); }
.about-list li::before,
.result-total strong,
.result-row strong { color: var(--ddu-primary); }

.form-group input,
.form-group textarea,
.form-group select,
.calculator-card input,
.calculator-card select,
.blog-search-input {
    color: var(--ddu-charcoal);
    border-color: rgba(7, 86, 214, .2);
    background: var(--ddu-warm);
}
.form-group input::placeholder,
.form-group textarea::placeholder,
.blog-search-input::placeholder,
.admin-page input::placeholder,
.admin-page textarea::placeholder {
    color: rgba(23, 32, 51, .52);
    opacity: 1;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.calculator-card input:focus,
.calculator-card select:focus,
.blog-search-input:focus {
    border-color: var(--ddu-action);
    box-shadow: 0 0 0 3px rgba(23, 105, 245, .13);
}

/* Artikel dan program. */
.article-page,
.program-page { background: var(--ddu-warm); }
.post-hero,
.detail-program-hero {
    background: linear-gradient(135deg, var(--ddu-deep), var(--ddu-primary));
}
.post-hero-overlay,
.detail-program-hero .hero-overlay {
    background: linear-gradient(110deg, rgba(6, 59, 158, .93), rgba(7, 86, 214, .72)) !important;
}
.post-hero h1,
.detail-program-hero h1,
.post-hero-meta strong,
.detail-program-hero .hero-content p { color: var(--ddu-warm) !important; }
.post-breadcrumb,
.post-breadcrumb a,
.post-hero-meta { color: rgba(250, 250, 247, .82); }
.post-page-layout,
.program-page #program-container > .container { background: var(--ddu-warm); }
.post-full,
.related-card {
    color: var(--ddu-charcoal);
    border-color: rgba(7, 86, 214, .14);
    background: var(--ddu-warm);
    box-shadow: 0 20px 54px rgba(23, 32, 51, .08);
}
.post-summary,
.post-full-content blockquote,
.dalil-box {
    border-color: var(--ddu-primary);
    background: var(--ddu-pale);
}
.post-full-content,
.post-summary ul,
.post-full-content blockquote,
.program-page .mock-content,
.program-page .mock-content p { color: var(--ddu-charcoal); }
.post-full-content a,
.related-read-more,
.related-content h3 a { color: var(--ddu-primary); }
.post-share { border-color: rgba(7, 86, 214, .16); }
.post-share > span:first-child,
.related-content h3 a { color: var(--ddu-charcoal); }
.post-share-buttons a:not(:first-child),
.post-share-buttons button { background: var(--ddu-primary); }
.related-section { border-color: rgba(7, 86, 214, .14); }
.related-img-wrapper { background: var(--ddu-pale); }

.cta-minimal,
.post-donation-cta,
.program-donation-cta {
    color: var(--ddu-warm);
    background:
        radial-gradient(circle at 92% 0, rgba(212, 168, 79, .2), transparent 30%),
        linear-gradient(140deg, var(--ddu-deep), var(--ddu-primary));
}
.cta-minimal h2,
.post-donation-cta h2,
.program-donation-cta h2,
.donation-method h3 { color: var(--ddu-warm); }
.cta-minimal p,
.post-donation-cta p,
.program-donation-cta p,
.donation-method small { color: var(--ddu-pale); }
.donation-method { color: var(--ddu-warm); background: rgba(250, 250, 247, .08); }
.donation-whatsapp-number { color: var(--ddu-gold); }
.donation-method--qr a { background: var(--ddu-warm); }
.btn-whatsapp-minimal { color: var(--ddu-warm); }
.back-to-top { color: var(--ddu-warm); background: var(--ddu-action); }

/* About. */
.about-page { background: var(--ddu-warm); }
.about-hero { background-color: var(--ddu-deep); }
.about-hero__overlay { background: linear-gradient(90deg, rgba(6, 59, 158, .96), rgba(7, 86, 214, .74) 58%, rgba(23, 32, 51, .38)); }
.about-hero h1,
.about-hero p,
.eyebrow--light { color: var(--ddu-warm); }
.about-hero .eyebrow { color: var(--ddu-warm) !important; }
.about-btn--ghost { color: var(--ddu-warm); border-color: rgba(250, 250, 247, .5); background: rgba(250, 250, 247, .08); }
.about-btn--light { color: var(--ddu-deep); background: var(--ddu-warm); }
.trust-item,
.vision-card--mission,
.value-card,
.program-focus__grid article,
.process-section,
.about-cta { background: var(--ddu-warm); }
.trust-item,
.vision-card--mission,
.value-card,
.program-focus__grid,
.program-focus__grid article { border-color: rgba(7, 86, 214, .16); }
.trust-item__number,
.program-focus__grid span { color: var(--ddu-primary); }
.focus-box,
.vision-section,
.program-focus { background: var(--ddu-pale); }
.focus-box { border-color: var(--ddu-primary); }
.vision-card--primary,
.transparency-section { background: linear-gradient(145deg, var(--ddu-deep), var(--ddu-primary)); }
.vision-card--primary h2,
.vision-card--primary p,
.transparency-copy h2,
.transparency-copy p,
.transparency-panel h3,
.transparency-panel strong,
.transparency-panel small { color: var(--ddu-warm); }
.vision-card--primary .card-kicker,
.transparency-panel li > span { color: var(--ddu-warm); }
.value-card__icon,
.process-list article > span { color: var(--ddu-warm); background: var(--ddu-primary); }
.transparency-panel { border-color: rgba(250, 250, 247, .16); background: rgba(250, 250, 247, .08); }

/* Kredibilitas dan privasi. */
.credibility-page { color: var(--ddu-charcoal); background: var(--ddu-pale); }
.credibility-hero { color: var(--ddu-warm); background: linear-gradient(135deg, var(--ddu-deep), var(--ddu-primary)); }
.credibility-hero h1,
.credibility-hero p { color: var(--ddu-warm); }
.trust-warning__inner { color: var(--ddu-warm); border-color: var(--ddu-gold); background: var(--ddu-deep); }
.trust-warning__inner p { color: var(--ddu-pale); }
.credibility-section { background: var(--ddu-pale); }
.credibility-section--white { background: var(--ddu-warm); }
.credibility-card,
.policy-content { border-color: rgba(7, 86, 214, .14); background: var(--ddu-warm); box-shadow: 0 14px 38px rgba(23, 32, 51, .07); }
.credibility-heading h2,
.credibility-card h3,
.policy-content h2 { color: var(--ddu-charcoal); }
.credibility-heading p,
.credibility-card p,
.credibility-card li,
.policy-content p,
.policy-content li { color: rgba(23, 32, 51, .74); }
.credibility-list a,
.policy-content a { color: var(--ddu-primary); }
.empty-information { background: var(--ddu-pale); }

/* Panel admin memakai sistem warna yang sama tanpa menghilangkan warna status. */
body.admin-page {
    color: var(--ddu-charcoal);
    background:
        radial-gradient(circle at 100% 0, rgba(7, 86, 214, .11), transparent 30rem),
        var(--ddu-pale);
}
.admin-page .sidebar-card,
.admin-page .card,
.admin-page .homepage-settings-panel,
.admin-page .homepage-live-preview,
.admin-page .homepage-media-section,
.admin-page .admin-dialog-card {
    border-color: rgba(7, 86, 214, .15);
    background: var(--ddu-warm);
    box-shadow: 0 12px 36px rgba(23, 32, 51, .09);
}
.admin-page h1,
.admin-page h2,
.admin-page h3,
.admin-page h4,
.admin-page label,
.admin-page .admin-brand,
.admin-page .login-brand strong { color: var(--ddu-charcoal); }
.admin-page .sidebar-nav button { color: rgba(23, 32, 51, .72); }
.admin-page .sidebar-nav button.active,
.admin-page .sidebar-nav button:hover {
    color: var(--ddu-primary);
    background: var(--ddu-pale);
}
.admin-page .sidebar-nav button.active .nav-symbol,
.admin-page .nav-symbol { border-color: rgba(7, 86, 214, .2); }
.admin-page .sidebar-nav button.active .nav-symbol { color: var(--ddu-warm); background: var(--ddu-primary); }
.admin-page .sidebar-label,
.admin-page .admin-section-eyebrow,
.admin-page .login-heading .admin-eyebrow { color: var(--ddu-primary); }
.admin-page input,
.admin-page textarea,
.admin-page select,
.admin-page .visual-editor,
.admin-page .toolbar button,
.admin-page .toolbar select,
.admin-page .drop-zone {
    color: var(--ddu-charcoal);
    border-color: rgba(7, 86, 214, .2);
    background: var(--ddu-warm);
}
.admin-page input:focus,
.admin-page textarea:focus,
.admin-page select:focus,
.admin-page .visual-editor:focus {
    border-color: var(--ddu-action);
    box-shadow: 0 0 0 3px rgba(23, 105, 245, .12);
}
.admin-page .drop-zone:hover,
.admin-page .drop-zone.dragover,
.admin-page .publication-settings,
.admin-page .seo-settings,
.admin-page .homepage-settings-panel {
    border-color: rgba(7, 86, 214, .22);
    background: var(--ddu-pale);
}
.admin-page .toolbar button:hover,
.admin-page .toolbar button.active { color: var(--ddu-warm); border-color: var(--ddu-primary); background: var(--ddu-primary); }
.admin-page button:disabled,
.admin-page .admin-pagination button:disabled {
    color: rgba(23, 32, 51, .46);
    border-color: rgba(7, 86, 214, .12);
    background: var(--ddu-pale);
}
.admin-page .stat-card-admin,
.admin-page .analytics-summary-card,
.admin-page .analytics-card { border-color: rgba(7, 86, 214, .14); background: var(--ddu-warm); }
.admin-page .stat-card-admin { border-left-color: var(--ddu-primary); }
.admin-page .stat-card-admin .number,
.admin-page .analytics-summary-card strong { color: var(--ddu-primary); }
.admin-page .analytics-bar-fill,
.admin-page .analytics-chart-bar { background: linear-gradient(90deg, var(--ddu-primary), var(--ddu-action)); }
.admin-page .homepage-mobile-priority,
.admin-page .homepage-media-heading > span,
.admin-page #homepage-preview-size {
    color: var(--ddu-deep);
    border-color: rgba(212, 168, 79, .42);
    background: rgba(212, 168, 79, .14);
}
.admin-page .homepage-preview-toggle button.is-active { color: var(--ddu-warm); background: var(--ddu-primary); }
.admin-page .homepage-preview-stage { border-color: rgba(7, 86, 214, .16); background: var(--ddu-pale); }
.admin-page .homepage-preview-navbar { background: rgba(6, 59, 158, .94); }
.admin-page .homepage-preview-shade { display: none; }
.admin-page .homepage-preview-copy {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    text-shadow: 0 2px 10px rgba(23, 32, 51, .95);
}
.admin-page .homepage-preview-copy small { color: var(--ddu-warm); }
.admin-page .homepage-preview-copy span { color: var(--ddu-warm); background: var(--ddu-action); }
.admin-page .homepage-live-preview[data-preview-mode="desktop"] .homepage-preview-shade { display: none; }

/* Gold hanya menjadi aksen kecil, bukan bidang utama. */
.section-header h2::after,
.eyebrow::before,
.home-process__steps span,
.trust-warning__inner,
.gallery-text h4::after { border-color: var(--ddu-gold); background-color: var(--ddu-gold); }

/* ========================================================================== */
/* SISTEM HIERARKI TIPOGRAFI DDU                                               */
/* ========================================================================== */

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    margin-block-start: 0;
    font-family: var(--ddu-font);
    text-wrap: balance;
    overflow-wrap: anywhere;
}

body h1 {
    color: var(--ddu-text-heading);
    font-size: var(--font-display);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.045em;
}

body h2 {
    color: var(--ddu-text-heading);
    font-size: var(--font-h2);
    font-weight: 700;
    line-height: var(--line-heading);
    letter-spacing: -.032em;
}

body h3 {
    color: var(--ddu-text-subheading);
    font-size: var(--font-h3);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.022em;
}

body h4,
body h5,
body h6 {
    color: var(--ddu-text-subheading);
    font-size: var(--font-h4);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.012em;
}

body main p,
body main li,
body main dd,
body main blockquote {
    color: var(--ddu-text-body);
    font-weight: 400;
    text-wrap: pretty;
}

body main small,
.blog-date,
.related-date,
.post-meta,
.post-hero-meta,
.gold-price-meta,
.calculator-note,
.admin-page .helper-text,
.admin-page .field-help,
.admin-page .admin-account-meta {
    color: var(--ddu-text-muted);
    font-size: var(--font-sm);
    font-weight: 500;
    line-height: 1.55;
}

.section-kicker,
.eyebrow,
.card-kicker,
.post-category,
.post-section-heading > span,
.post-summary > span,
.post-donation-cta > span,
.program-donation-cta > span,
.donation-method-label,
.admin-workspace-kicker,
.admin-eyebrow,
.admin-section-eyebrow,
.sidebar-label {
    color: var(--ddu-primary);
    font-size: var(--font-xs);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.section-header h2,
.section-heading h2,
.section-intro h2,
.post-section-heading h2,
.credibility-heading h2,
.policy-content h2 {
    color: var(--ddu-text-heading);
    font-size: var(--font-h2);
    font-weight: 700;
    line-height: var(--line-heading);
    letter-spacing: -.032em;
}

.section-header > p,
.section-heading > p,
.gallery-intro,
.profile-copy .lead,
.hero-content > p,
.credibility-hero > p,
.credibility-hero .container > p {
    font-size: var(--font-lead);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -.008em;
}

.blog-content h3,
.blog-content h3 a,
.program-card-title,
.gallery-text h4,
.value-card h3,
.program-focus__grid h3,
.process-list h3,
.credibility-card h3,
.related-content h3,
.calculator-info h3 {
    font-size: var(--font-h4);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.018em;
}

.logo,
.nav-links a,
.btn,
.about-btn,
.btn-calc,
.btn-reset,
.btn-whatsapp-minimal,
.read-more,
.related-read-more,
.admin-page button {
    font-weight: 600;
    letter-spacing: -.006em;
}

.nav-links a {
    font-size: clamp(.9rem, .86rem + .14vw, 1rem);
}

.btn,
.about-btn,
.btn-calc,
.btn-reset,
.btn-whatsapp-minimal {
    font-size: clamp(.92rem, .88rem + .12vw, 1rem);
    line-height: 1.2;
}

/* Judul display pada hero memiliki bahasa visual yang sama di semua halaman. */
.home-page .hero-content h1,
.about-page .about-hero h1,
.article-page .post-hero h1,
.program-page .detail-program-hero h1,
.credibility-page .credibility-hero h1 {
    color: var(--ddu-text-on-dark) !important;
    font-size: var(--font-display);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.048em;
}

.home-page .hero-content > p,
.about-page .about-hero p,
.article-page .post-hero-meta,
.program-page .detail-program-hero .hero-content p,
.credibility-page .credibility-hero p {
    color: var(--ddu-text-on-dark-muted) !important;
}

.home-page .hero-content .section-kicker,
.about-page .about-hero .eyebrow,
.article-page .post-hero .post-category,
.program-page .detail-program-hero .section-kicker,
.credibility-page .credibility-hero .eyebrow,
.cta-minimal .section-kicker,
.post-donation-cta > span,
.program-donation-cta > span,
.vision-card--primary .card-kicker,
.transparency-section .eyebrow,
.admin-page .admin-workspace-header .admin-workspace-kicker {
    color: var(--ddu-gold) !important;
}

/* Konten panjang dibuat nyaman dibaca dan konsisten dengan editor admin. */
.article-page .post-full-content,
.policy-content {
    color: var(--ddu-text-body);
    font-size: var(--font-body) !important;
    line-height: 1.75 !important;
}

.program-page .mock-content {
    color: var(--ddu-text-body);
    font-size: var(--font-body) !important;
    line-height: 1.6 !important;
}

.article-page .post-full-content p,
.article-page .post-full-content li,
.program-page .mock-content p,
.program-page .mock-content li,
.policy-content p,
.policy-content li {
    color: var(--ddu-text-body);
}

.article-page .post-full-content h1,
.article-page .post-full-content h2,
.program-page .mock-content h1,
.program-page .mock-content h2,
.policy-content h2 {
    color: var(--ddu-text-heading);
    font-weight: 700;
    letter-spacing: -.028em;
}

.article-page .post-full-content h3,
.article-page .post-full-content h4,
.program-page .mock-content h3,
.program-page .mock-content h4,
.policy-content h3 {
    color: var(--ddu-text-subheading);
    font-weight: 700;
    letter-spacing: -.018em;
}

.article-page .post-full-content a,
.program-page .mock-content a,
.policy-content a {
    color: var(--ddu-primary);
    font-weight: 600;
    text-decoration-color: rgba(7, 86, 214, .42);
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}

/* Teks di bidang gelap selalu memakai kontras terang yang terkontrol. */
.footer h2,
.footer h3,
.footer h4,
.footer .footer-heading,
.cta-minimal h2,
.post-donation-cta h2,
.post-donation-cta h3,
.program-donation-cta h2,
.program-donation-cta h3,
.video-promo-content h2,
.vision-card--primary h2,
.transparency-section h2,
.transparency-section h3,
.trust-warning__inner strong {
    color: var(--ddu-text-on-dark);
}

.footer p,
.footer li,
.footer a,
.cta-minimal p,
.post-donation-cta p,
.program-donation-cta p,
.video-promo-content p,
.vision-card--primary p,
.transparency-section p,
.transparency-section li,
.trust-warning__inner p {
    color: var(--ddu-text-on-dark-muted);
}

/* Panel admin mengikuti hirarki yang sama, tetapi warna status tetap dipertahankan. */
.admin-page .admin-workspace-header h1 {
    color: var(--ddu-text-on-dark);
    font-size: clamp(1.9rem, 1.55rem + 1.4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.038em;
}

.admin-page .admin-workspace-header h1 + p,
.admin-page .admin-workspace-meta span,
.admin-page .admin-workspace-meta a {
    color: var(--ddu-text-on-dark-muted);
}

.admin-page .card h2,
.admin-page .card h3,
.admin-page .homepage-settings-panel h2,
.admin-page .homepage-media-section h2,
.admin-page .admin-dialog-card h2 {
    color: var(--ddu-text-heading);
}

.admin-page label {
    color: var(--ddu-text-subheading);
    font-size: var(--font-sm);
    font-weight: 600;
    line-height: 1.4;
}

.admin-page input,
.admin-page textarea,
.admin-page select,
.admin-page .visual-editor {
    color: var(--ddu-text-body);
    font-size: .96rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
}

.admin-page input::placeholder,
.admin-page textarea::placeholder {
    color: var(--ddu-text-soft);
}

@media (max-width: 768px) {
    :root {
        --font-display: clamp(2.15rem, 9vw, 3.15rem);
        --font-h2: clamp(1.65rem, 6.4vw, 2.2rem);
        --font-h3: clamp(1.2rem, 4.8vw, 1.48rem);
        --font-body: clamp(.98rem, 3.8vw, 1.04rem);
        --font-lead: clamp(1.02rem, 4.1vw, 1.14rem);
    }

    body h1,
    .home-page .hero-content h1,
    .about-page .about-hero h1,
    .article-page .post-hero h1,
    .program-page .detail-program-hero h1,
    .credibility-page .credibility-hero h1 {
        line-height: 1.08;
        letter-spacing: -.04em;
    }

    body main p,
    body main li,
    .article-page .post-full-content {
        line-height: 1.68 !important;
    }

    .program-page .mock-content {
        line-height: 1.58 !important;
    }

    .program-page .mock-content p,
    .program-page .mock-content li {
        line-height: 1.58 !important;
    }
}