/* Grafik tren indeks SKM / IPAK di beranda (di dalam .sv-hero, di atas tombol Isi Survei). */
.gb-card { background: #fff; color: var(--sv-text, #1f2d27); border-radius: 14px; padding: 18px 20px 14px; margin-top: 20px; box-shadow: 0 10px 24px rgba(0, 0, 0, .16); }
.gb-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.sv-hero .gb-card h2 { font-size: 16px; font-weight: 700; margin: 0; color: var(--sv-text, #1f2d27); }
.sv-hero .gb-card p { max-width: none; opacity: 1; }
.gb-sub { margin: 2px 0 0 !important; font-size: 12.5px; color: var(--sv-muted, #66766e); }
.gb-filter { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--sv-muted, #66766e); }
.gb-filter select { height: 36px; border: 1.5px solid #cfdad3; border-radius: 10px; padding: 0 30px 0 10px; font-size: 13.5px; color: var(--sv-text, #1f2d27); background-color: #fff; cursor: pointer; }
.gb-filter select:focus { outline: 0; border-color: var(--sv-green, #2f8a5b); box-shadow: 0 0 0 3px rgba(47, 138, 91, .15); }

.gb-wadah { position: relative; margin-top: 6px; }
.gb-gulir { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.gb-gulir.memuat { opacity: .45; transition: opacity .15s; }
#gb-grafik svg { display: block; max-width: none; }
#gb-grafik .gb-garis { fill: none; stroke: #2b3a67; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
#gb-grafik .gb-sumbu { stroke: #2b3a67; stroke-width: 2; }
#gb-grafik .gb-tanda { stroke: #2b3a67; stroke-width: 2; }
#gb-grafik .gb-halo { fill: rgba(122, 120, 217, .28); }
#gb-grafik .gb-bulat { fill: #7a78d9; }
#gb-grafik .gb-kubus { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
#gb-grafik .gb-nilai { font: 700 14px -apple-system, "Segoe UI", Roboto, Arial, sans-serif; fill: #2b3a67; text-anchor: middle; }
#gb-grafik .gb-label { font: 12px -apple-system, "Segoe UI", Roboto, Arial, sans-serif; fill: #3d4b5c; text-anchor: middle; }
#gb-grafik .gb-titik { cursor: pointer; outline: none; }
#gb-grafik .gb-titik:hover .gb-halo, #gb-grafik .gb-titik:focus .gb-halo { fill: rgba(122, 120, 217, .5); }
@media (prefers-reduced-motion: no-preference) {
    #gb-grafik .gb-garis { stroke-dasharray: var(--gb-panjang, 2000); stroke-dashoffset: var(--gb-panjang, 2000); animation: gb-gambar .9s ease-out forwards; }
    #gb-grafik .gb-titik { opacity: 0; animation: gb-muncul .35s ease-out forwards; }
}
@keyframes gb-gambar { to { stroke-dashoffset: 0; } }
@keyframes gb-muncul { to { opacity: 1; } }

.gb-tip { position: absolute; z-index: 5; pointer-events: none; background: #1f2d27; color: #fff; border-radius: 10px; padding: 8px 11px; font-size: 12.5px; line-height: 1.45; box-shadow: 0 8px 18px rgba(0, 0, 0, .25); white-space: nowrap; transform: translate(-50%, -100%); }
.gb-tip[hidden] { display: none; }
.gb-tip b { display: block; font-size: 13px; }
.gb-pesan { margin: 14px 0 6px !important; text-align: center; font-size: 13.5px; color: var(--sv-muted, #66766e); }
.gb-pesan[hidden] { display: none; }
.gb-catatan { margin: 6px 0 0 !important; font-size: 11.5px; color: #8a96a0; }

@media (max-width: 600px) {
    .gb-card { padding: 14px 12px 10px; }
    .gb-filter { width: 100%; }
    .gb-filter select { flex: 1; }
}

.gb-kontrol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.gb-tab { display: inline-flex; background: #eef3f0; border-radius: 10px; padding: 3px; }
.gb-tab button { border: 0; background: transparent; border-radius: 8px; padding: 6px 16px; font-size: 13.5px; font-weight: 700; color: var(--sv-muted, #66766e); cursor: pointer; }
.gb-tab button.aktif { background: #fff; color: var(--sv-green-dark, #256f48); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.gb-tab button:focus-visible { outline: 2px solid var(--sv-green, #2f8a5b); outline-offset: 1px; }
@media (max-width: 600px) {
    .gb-kontrol { width: 100%; }
    .gb-tab { width: 100%; }
    .gb-tab button { flex: 1; }
}