:root {
  --kph-primary: #2981cc;
  --kph-primary-dark: #1d5d93;
  --kph-bg: #f8fafc;
  --kph-surface: #ffffff;
  --kph-border: #e2e8f0;
  --kph-text: #0f172a;
  --kph-text-muted: #64748b;
  --kph-radius: 14px;
}

.kph-home { background: var(--kph-bg); }

/* ---------- Navbar brand (logo + wordmark) ---------- */
.kph-navbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.kph-navbar-brand__logo { height: 40px; width: auto; display: block; }
.kph-navbar-brand__text { font-size: 16px; font-weight: 700; color: var(--kph-text); letter-spacing: .01em; line-height: 1.2; }
.kph-navbar-brand__text span {
  display: block; font-size: 10px; font-weight: 500; color: var(--kph-text-muted);
  text-transform: uppercase; letter-spacing: .06em;
}

/* ---------- Hero (foto Kepahiang + overlay biru) ---------- */
.kph-hero {
  position: relative;
  background-image:
    linear-gradient(135deg, rgba(41,129,204,.88) 0%, rgba(29,93,147,.93) 100%),
    url('/images/hero-kepahiang.jpg');
  background-size: cover;
  background-position: center;
  padding: 96px 24px;
  color: #fff;
  text-align: center;
}
.kph-hero__inner { max-width: 760px; margin: 0 auto; }
.kph-hero__title { font-size: 40px; font-weight: 700; margin: 0 0 16px; }
.kph-hero__subtitle { font-size: 17px; opacity: .92; margin: 0 0 32px; line-height: 1.6; }
.kph-hero__search {
  display: flex; max-width: 560px; margin: 0 auto;
  background: #fff; border-radius: 999px; padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.kph-hero__search-input {
  flex: 1; border: none; outline: none; padding: 12px 20px;
  font-size: 15px; border-radius: 999px; color: var(--kph-text);
}
.kph-hero__search-btn {
  background: var(--kph-primary); color: #fff; border: none;
  border-radius: 999px; padding: 12px 28px; font-weight: 600; cursor: pointer;
}
.kph-hero__search-btn:hover { background: var(--kph-primary-dark); }

/* ---------- Statistik ---------- */
.kph-stats { margin-top: -36px; padding: 0 24px; position: relative; z-index: 1; }
.kph-stats__grid {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.kph-stat-card {
  background: var(--kph-surface); border-radius: var(--kph-radius);
  padding: 24px; text-align: center; text-decoration: none;
  box-shadow: 0 8px 24px rgba(15,23,42,.08); transition: transform .15s;
}
.kph-stat-card:hover { transform: translateY(-3px); }
.kph-stat-card__number { display: block; font-size: 30px; font-weight: 700; color: var(--kph-primary); }
.kph-stat-card__label { display: block; margin-top: 4px; font-size: 13px; color: var(--kph-text-muted); }

/* ---------- Seksi umum ---------- */
.kph-section { max-width: 1100px; margin: 64px auto; padding: 0 24px; }
.kph-section--alt { background: var(--kph-surface); padding: 48px 24px; border-radius: var(--kph-radius); }
.kph-section__title { font-size: 22px; font-weight: 700; color: var(--kph-text); margin: 0 0 24px; }
.kph-section__more { text-align: center; margin-top: 28px; }
.kph-empty { color: var(--kph-text-muted); font-size: 14px; }

/* ---------- Kartu kategori / perangkat daerah ---------- */
.kph-cat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 900px) { .kph-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kph-cat-grid { grid-template-columns: 1fr; } }
.kph-cat-card {
  background: var(--kph-surface); border: 1px solid var(--kph-border);
  border-radius: var(--kph-radius); padding: 20px; text-decoration: none;
  color: var(--kph-text); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.kph-cat-card:hover {
  border-color: var(--kph-primary); transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(41,129,204,.12);
}
.kph-cat-card__name { display: block; font-weight: 600; margin-top: 12px; }
.kph-cat-card__count { display: block; margin-top: 4px; font-size: 13px; color: var(--kph-text-muted); }

/* Ikon kategori: lingkaran warna dengan simbol SVG inline via mask,
   supaya bisa ikut warna tema tanpa perlu file gambar terpisah. */
.kph-cat-card__icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: #e8f1fb; /* fallback untuk browser tanpa color-mix() */
  background: color-mix(in srgb, var(--kph-primary) 12%, white);
}
.kph-cat-card__icon::before {
  content: ''; display: block; width: 22px; height: 22px;
  background-color: var(--kph-primary);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.kph-icon--health::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-10-9.3C.4 8 2 4.5 5.6 4.5c2 0 3.4 1 4.4 2.4C11 5.5 12.4 4.5 14.4 4.5 18 4.5 19.6 8 22 11.7 19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-10-9.3C.4 8 2 4.5 5.6 4.5c2 0 3.4 1 4.4 2.4C11 5.5 12.4 4.5 14.4 4.5 18 4.5 19.6 8 22 11.7 19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E"); }
.kph-icon--education::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1 8l11 5 9-4.1V17h2V8L12 3zM5 10.2V15c0 2 3 4 7 4s7-2 7-4v-4.8l-7 3.2-7-3.2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1 8l11 5 9-4.1V17h2V8L12 3zM5 10.2V15c0 2 3 4 7 4s7-2 7-4v-4.8l-7 3.2-7-3.2z'/%3E%3C/svg%3E"); }
.kph-icon--population::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 3-1.34 3-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05C16.16 13.66 17 14.99 17 16.5V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 3-1.34 3-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05C16.16 13.66 17 14.99 17 16.5V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E"); }
.kph-icon--social::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"); }
.kph-icon--economy::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h2v7H3v-7zm4-6h2v13H7V7zm4 3h2v10h-2V10zm4-6h2v16h-2V4zm4 9h2v7h-2v-7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h2v7H3v-7zm4-6h2v13H7V7zm4 3h2v10h-2V10zm4-6h2v16h-2V4zm4 9h2v7h-2v-7z'/%3E%3C/svg%3E"); }
.kph-icon--finance::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z'/%3E%3C/svg%3E"); }
.kph-icon--tourism::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4.5 20.3l7.5-4.4 7.5 4.4L12 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4.5 20.3l7.5-4.4 7.5 4.4L12 2z'/%3E%3C/svg%3E"); }
.kph-icon--agriculture::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8 2 5 6 5 10c0 5 7 12 7 12s7-7 7-12c0-4-3-8-7-8zm0 10.5A2.5 2.5 0 1 1 12 7a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8 2 5 6 5 10c0 5 7 12 7 12s7-7 7-12c0-4-3-8-7-8zm0 10.5A2.5 2.5 0 1 1 12 7a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E"); }
.kph-icon--environment::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17 1.05.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75C7 8 17 8 17 8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17 1.05.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75C7 8 17 8 17 8z'/%3E%3C/svg%3E"); }
.kph-icon--infrastructure::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 11V9l-2-4h-3l1 4h-4V5h-2v4H8L9 5H6L4 9v2h1v9h2v-9h4v9h2v-9h4v9h2v-9h3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 11V9l-2-4h-3l1 4h-4V5h-2v4H8L9 5H6L4 9v2h1v9h2v-9h4v9h2v-9h4v9h2v-9h3z'/%3E%3C/svg%3E"); }
.kph-icon--digital::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3a4.24 4.24 0 0 0-6 0zm-4-4l2 2a7.07 7.07 0 0 1 10 0l2-2C15.14 9.14 8.87 9.14 5 13z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3a4.24 4.24 0 0 0-6 0zm-4-4l2 2a7.07 7.07 0 0 1 10 0l2-2C15.14 9.14 8.87 9.14 5 13z'/%3E%3C/svg%3E"); }
.kph-icon--government::before,
.kph-icon--default::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 7v2h20V7l-10-5zM4 10v9H2v2h20v-2h-2v-9h-2v9h-3v-9h-2v9h-3v-9H8v9H6v-9H4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 7v2h20V7l-10-5zM4 10v9H2v2h20v-2h-2v-9h-2v9h-3v-9h-2v9h-3v-9H8v9H6v-9H4z'/%3E%3C/svg%3E"); }

/* ---------- Bar chart "Dataset per Perangkat Daerah" ---------- */
.kph-bar-chart { display: flex; flex-direction: column; gap: 12px; }
.kph-bar-row {
  display: grid; grid-template-columns: 180px 1fr 32px; align-items: center;
  gap: 12px; text-decoration: none; color: var(--kph-text);
}
.kph-bar-row__label {
  font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.kph-bar-row__track {
  background: var(--kph-bg); border-radius: 999px; height: 10px; overflow: hidden;
}
.kph-bar-row__fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--kph-primary), var(--kph-primary-dark));
  transition: width .3s ease;
}
.kph-bar-row__value { font-size: 12px; font-weight: 700; color: var(--kph-primary); text-align: right; }

@media (max-width: 560px) {
  .kph-bar-row { grid-template-columns: 100px 1fr 28px; }
  .kph-bar-row__label { font-size: 12px; }
}

/* ---------- Kartu dataset ---------- */
.kph-dataset-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;
}
.kph-dataset-card {
  display: block; background: var(--kph-bg); border-radius: 10px;
  padding: 18px; text-decoration: none; color: var(--kph-text);
  border: 1px solid var(--kph-border);
}
.kph-dataset-card:hover { border-color: var(--kph-primary); }
.kph-dataset-card__org {
  display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--kph-primary); font-weight: 600;
}
.kph-dataset-card__title { display: block; font-weight: 600; margin: 6px 0; line-height: 1.4; }
.kph-dataset-card__meta { display: block; font-size: 12px; color: var(--kph-text-muted); }

/* ---------- Tombol ---------- */
.kph-btn { display: inline-block; padding: 12px 28px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.kph-btn--outline { border: 2px solid var(--kph-primary); color: var(--kph-primary); }
.kph-btn--outline:hover { background: var(--kph-primary); color: #fff; }

/* ---------- Responsif ---------- */
@media (max-width: 640px) {
  .kph-hero__title { font-size: 28px; }
  .kph-stats__grid { grid-template-columns: 1fr; }
  .kph-hero__search { flex-direction: column; border-radius: 16px; }
  .kph-hero__search-btn { margin-top: 8px; }
  .kph-navbar-brand__text { font-size: 14px; }
  .kph-navbar-brand__logo { height: 34px; }
}