/* ==========================================================================
   DPKP v5 — Visual Refresh
   File tambahan (bukan pengganti main.css). Dimuat SETELAH main.css supaya
   aturan di sini menang tanpa perlu mengubah file asli tema.

   Aksen baru: emas hangat (terinspirasi warna gonjong atap Rumah Gadang),
   dipakai secukupnya sebagai penanda "identitas lokal", bukan warna dominan.
   ========================================================================== */

:root{
    --gold:#d99a3d;
    --gold-light:#f3c878;
    --navy-deep:#04101f;
}

/* --- Tipografi: sedikit lebih tajam & rapat --- */
body.dpkp-site{ letter-spacing:-.005em; }
.dpkp-hero h1, .dpkp-page-hero h1, .dpkp-v4-page-hero h1{ letter-spacing:-.05em; }

/* --- Kicker pakai aksen emas, bukan biru polos --- */
.dpkp-kicker, .dpkp-hero-kicker, .dpkp-page-hero .dpkp-kicker, .dpkp-v4-page-hero .dpkp-kicker{
    color:var(--gold) !important;
}
.dpkp-hero-kicker span{ background:linear-gradient(90deg,var(--gold),var(--cyan)) !important; }

/* --- Hero: gradasi lebih dalam + garis tipis emas di badge floating --- */
.dpkp-hero{ background:linear-gradient(135deg,var(--navy-deep) 0%,#0a2547 55%,#0a5c96 100%); }
.dpkp-floating-stat{ border-top:2px solid var(--gold); }
.dpkp-floating-stat-icon{ color:var(--gold) !important; }

/* --- Tombol utama: emas sebagai CTA paling penting, cyan tetap untuk aksi sekunder --- */
.dpkp-btn-primary{
    background:linear-gradient(135deg,var(--gold-light),var(--gold)) !important;
    color:#241503 !important;
    box-shadow:0 16px 38px rgba(217,154,61,.28) !important;
}

/* --- Kartu layanan & data: shadow lebih dalam, border hover emas --- */
.dpkp-service-card{ transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.dpkp-service-card:hover{ transform:translateY(-4px); box-shadow:0 20px 46px rgba(8,34,61,.16); }
.dpkp-data-grid article{ transition:border-color .2s; }
.dpkp-data-grid article:hover{ border-color:rgba(217,154,61,.55); }
.dpkp-data-grid .dpkp-data-highlight{
    background:linear-gradient(135deg,rgba(217,154,61,.22),rgba(32,215,255,.10)) !important;
    border-color:rgba(217,154,61,.4) !important;
}

/* --- Progress bar dashboard: emas untuk metrik yang jadi prioritas --- */
.dpkp-v4-progress-accent .dpkp-v4-progress-bar i,
.dpkp-v4-progress-bar i{ background:linear-gradient(90deg,var(--blue),var(--gold)) !important; }
.dpkp-v4-progress-accent{ border-color:rgba(217,154,61,.4) !important; }

/* --- Pill list & badge kecil --- */
.dpkp-pill-list span{ border:1px solid rgba(217,154,61,.35); }
.dpkp-solution-list span svg{ color:var(--gold); }

/* --- Section rhythm: sedikit lebih lega, biar nggak sesak --- */
.dpkp-section{ padding:88px 0; }
@media(max-width:640px){ .dpkp-section{ padding:56px 0; } }

/* --- CTA akhir: pakai gradasi navy + emas, bukan biru-cyan polos --- */
.dpkp-cta{ background:linear-gradient(120deg,var(--navy-deep),#0a5c96) !important; }
.dpkp-cta:before{ background:radial-gradient(circle,rgba(217,154,61,.4),transparent 68%) !important; }

/* ==========================================================================
   Section baru: Sorotan Data RTLH (dipasangkan lewat front-page.php)
   ========================================================================== */
.dpkp-rtlh-highlight{
    background:linear-gradient(135deg,#fff7ea,#ffffff);
    border-top:1px solid #f0e2c8;border-bottom:1px solid #f0e2c8;
}
.dpkp-rtlh-highlight-grid{ display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center; }
.dpkp-rtlh-highlight-copy h2{ font-size:clamp(28px,3.6vw,42px);letter-spacing:-.03em;color:var(--navy);margin:10px 0 16px;line-height:1.15; }
.dpkp-rtlh-highlight-copy p{ color:var(--muted);font-size:16px;line-height:1.7;max-width:480px;margin:0 0 26px; }
.dpkp-rtlh-highlight-stats{ display:flex;gap:28px;margin-bottom:28px; }
.dpkp-rtlh-highlight-stats strong{ display:block;font-size:34px;color:var(--navy);letter-spacing:-.02em; }
.dpkp-rtlh-highlight-stats span{ font-size:12.5px;color:var(--muted);font-weight:700; }

.dpkp-rtlh-highlight-panel{
    background:#fff;border-radius:22px;border:1px solid var(--line);
    box-shadow:0 22px 50px rgba(8,34,61,.10);padding:26px 28px;
}
.dpkp-rtlh-highlight-panel h3{ margin:0 0 18px;font-size:15px;color:var(--navy);display:flex;align-items:center;gap:8px; }
.dpkp-rtlh-mini-row{ display:grid;grid-template-columns:150px 1fr 40px;align-items:center;gap:10px;margin-bottom:12px; }
.dpkp-rtlh-mini-row span:first-child{ font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.dpkp-rtlh-mini-track{ background:var(--surface);border-radius:8px;height:12px;overflow:hidden; }
.dpkp-rtlh-mini-fill{ height:100%;border-radius:8px;background:linear-gradient(90deg,var(--gold),var(--gold-light)); }
.dpkp-rtlh-mini-row span:last-child{ font-size:12.5px;font-weight:800;color:var(--navy);text-align:right; }
.dpkp-rtlh-highlight-panel small{ display:block;margin-top:14px;color:var(--muted);font-size:11.5px; }

@media(max-width:900px){
    .dpkp-rtlh-highlight-grid{ grid-template-columns:1fr; }
    .dpkp-rtlh-highlight-stats{ flex-wrap:wrap;gap:20px; }
}