html{scroll-behavior:smooth;}
/* Basic reset and typography */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;}
body{font-family:'Poppins',system-ui,Segoe UI,Roboto,Arial,sans-serif;color:#222;background:#fff}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
/* Header / Navbar */
:root{
--header-height: 84px; /* ubah sesuai kebutuhan */
--content-offset: 40px; /* jarak visual antara hero dan section berikutnya */
/* logo/menu gap - change these values to adjust spacing per breakpoint */
--logo-gap-mobile: 100px; /* used as default (mobile) */
--logo-gap-desktop: 300px; /* used on wide screens */
--logo-gap-tablet: 300px; /* used on tablets */
}
/* pastikan section tidak tertutup oleh header fixed */
:root{
--header-height: 84px; /* jika sudah didefinisikan di styles.css, sesuaikan jika perlu */
}
/* jika navbar fixed, berikan offset pada main/section */
main{ padding-top: calc(var(--header-height) + 8px); }
#navbar-header{border-bottom:4px solid rgba(0,0,0,0.06);box-shadow:0 2px 0 rgba(0,0,0,0.04);background:white;position:fixed;left:0;right:0;top:0;z-index:100; height:var(--header-height);}
.navbar{display:flex;align-items:center;justify-content:center;height:100%;transition:background-color .25s ease,box-shadow .25s ease;padding-top:0;padding-bottom:0}
.container{max-width:1100px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;/* nudge logo a bit to the left */
/* remove negative nudge so logo doesn't overlap nav items */
margin-left:0;
/* default gap uses mobile variable; desktop override below */
margin-right: var(--logo-gap-mobile);
}
.logo img{display:block;max-width:500px;object-fit:contain;height:auto;max-height:calc(var(--header-height) - 16px);}
.nav-links{list-style:none;display:flex;gap:28px}
.nav-links li a{color:rgba(0, 0, 0, 0.95);text-decoration:none;font-size:14px}
/* Mobile nav toggle button */
.nav-toggle{display:none;background:transparent;border:0;padding:8px;align-items:center;justify-content:center}
.nav-toggle .hamburger{display:block;width:22px;height:2px;background:#000000;position:relative}
.nav-toggle .hamburger::before,.nav-toggle .hamburger::after{content:'';position:absolute;left:0;right:0;height:2px;background:#000000}
.nav-toggle .hamburger::before{top:-7px}
.nav-toggle .hamburger::after{top:7px}
.nav-menu{display:block}
.navbar::after{
content:"";
position:absolute;
left:0;right:0;bottom:0;
height:1px;
background:rgba(255,255,255,0.18);
pointer-events:none;
transition:background .2s ease,opacity .2s ease;
}
/* darker thin line when navbar becomes white after scrolling */
.navbar.scrolled::after{
background:rgba(0,0,0,0.08);
}
/* Nav link hover animation: subtle underline grow + color transition */
.nav-links li a{
position: relative;
padding: 6px 4px;
transition: color .18s ease, transform .12s ease;
will-change: color, transform;
outline: none;
}
/* animated underline using pseudo-element (adapts to currentColor) */
.nav-links li a::after{
content: "";
position: absolute;
left: 50%;
bottom: -8px;
transform: translateX(-50%) scaleX(0);
transform-origin: center;
width: 56%;
height: 3px;
border-radius: 3px;
background: currentColor;
opacity: 0;
transition: transform .28s cubic-bezier(.2,.9,.25,1), opacity .18s ease;
}
/* show underline and slightly lift text on hover/focus */
.nav-links li a:hover,
.nav-links li a:focus{
color: currentColor;
transform: translateY(-2px);
}
.nav-links li a:hover::after,
.nav-links li a:focus::after{
transform: translateX(-50%) scaleX(1);
opacity: 1;
}
/* when navbar is white (scrolled), ensure underline and hover are visible */
.navbar.scrolled .nav-links li a{ transition: color .18s ease; }
.navbar.scrolled .nav-links li a::after{ background: currentColor; }
/* Hasil Survey — layout & card styling */
.hasil-survei{
padding: 64px 18px;
background: linear-gradient(180deg, #fff 0%, #fbfbfb 100%);
display: block;
box-sizing: border-box;
}
.hasil-survei .container{
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}
/* Title */
.title-hasil-survei{
text-align: center;
margin: 0 auto 28px;
font-size: 30px;
line-height: 1.15;
font-weight: 700;
color: #121212;
max-width: 980px;
letter-spacing: -0.2px;
padding-top: 8px; /* sedikit ruang agar tidak pas di tepi */
}
/* Card wrapper around chart area (if you add a wrapper div.chart-card) */
.chart-card{
background: #ffffff;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(18,18,18,0.06);
padding: 20px 22px;
margin: 18px auto 0;
max-width: 920px;
width: 100%;
display: flex;
flex-direction: column;
gap: 14px;
}
/* If canvas is direct child, style to look like card */
.hasil-survei .container > canvas,
.hasil-survei .container .chart-canvas{
background: transparent;
border-radius: 10px;
display: block;
width: 100% !important;
/* keep chart visually large but preserve aspect ratio via JS/Chart.js maintainAspectRatio */
max-height: 520px;
height: auto !important;
margin: 0 auto;
}
/* Custom legend area below chart (if generated) */
.chart-legend{
display: flex;
flex-wrap: wrap;
gap: 12px 28px;
align-items: center;
justify-content: center;
padding-top: 6px;
}
.legend-item{
display: flex;
align-items: center;
gap: 10px;
white-space: nowrap;
font-size: 14px;
color: #333;
}
.legend-swatch{
width: 14px;
height: 14px;
border-radius: 4px;
flex: 0 0 auto;
box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;
}
/* Make the chart visually centered with title above and legend below */
.chart-card .chart-header{
text-align: center;
}
.chart-card .chart-title{
font-size: 20px;
margin: 0;
color: #222;
font-weight:700;
}
.hasil-survei{
text-align: center;
padding: 32px 12px;
}
.hasil-survei h2{
margin: 0 auto 18px;
font-size: 28px;
font-weight: 700;
color: #111;
max-width: 900px;
line-height: 1.15;
}
/* Card header and legend inside chart card */
.chart-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
}
.chart-title{font-size:16px;font-weight:700;color:#111;margin:0}
.chart-sub{font-size:12px;color:#666;margin:0}
.chart-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.legend-item{display:flex;align-items:center;gap:8px;background:transparent;padding:6px 8px;border-radius:6px}
.legend-swatch{width:12px;height:12px;border-radius:3px;flex:0 0 12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.04)}
.legend-label{font-size:13px;color:#222}
.legend-meta{font-size:12px;color:#666;margin-left:6px}
#charts::-webkit-scrollbar{ display: none; height:0; }
#charts::-webkit-scrollbar-track{ background:transparent }
#charts::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.12); border-radius:8px }
#charts.dragging{ cursor: grabbing }
/* Charts layout: horizontal carousel on wide screens, stacked grid on small screens */
#charts{
display: flex;
gap: 18px;
align-items: start;
margin-top: 8px;
margin-bottom: 40px;
padding: 12px 20px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
max-width: none; /* allow full-bleed */
width: 100%;
box-sizing: border-box;
/* hide native scrollbar visuals while preserving scroll functionality */
-ms-overflow-style: none; /* IE/Edge */
scrollbar-width: none; /* Firefox */
}
.chart-wrap{
background: #fff;
/* floating card look */
border: 1px solid rgba(0,0,0,0.04);
padding: 18px;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(17,24,39,0.08);
display: flex;
flex-direction: column;
gap: 12px;
/* fixed card size so all cards match */
height: 460px;
/* make each chart a card with fixed-ish width so they can be scrolled horizontally */
flex: 0 0 360px;
min-width: 320px;
max-width: 420px;
scroll-snap-align: center;
transform: translateX(40px);
opacity: 0;
transition: transform .6s cubic-bezier(.2,.85,.25,1), opacity .45s ease, box-shadow .25s ease, transform .18s ease;
}
.chart-wrap.in-view{ transform: none; opacity: 1 }
.chart-wrap h3{font-size:14px;margin:0;color:#222}
.chart-wrap p{font-size:13px;color:#444;margin:0}
.chart-wrap canvas{width:100% !important;height:100% !important}
/* ensure the chart canvas stays square inside the card */
.chart-canvas{ width:100%; display:flex; align-items:center; justify-content:center; aspect-ratio: 1 / 1; }
.chart-canvas canvas{ width:100% !important; height:100% !important; max-width:100% }
/* floating card hover lift */
.chart-wrap:hover{ transform: translateY(-6px) scale(1.01); box-shadow: 0 18px 36px rgba(17,24,39,0.12) }
/* Carousel pagination dots */
.carousel-dots{ display:flex; gap:8px; align-items:center; justify-content:center; margin: 14px 0 28px; }
.carousel-dot{ width:10px; height:10px; border-radius:50%; background:rgba(0,0,0,0.12); cursor:pointer; transition: transform .18s ease, background .18s ease; }
.carousel-dot.active{ background: #111; transform: scale(1.25); box-shadow: 0 4px 12px rgba(0,0,0,0.08) }
a.btn {
display: inline-block;
padding: 12px 22px;
background:rgba(185, 185, 185, 0.75 );
color: #111;
text-decoration: none;
border-radius: 10px;
letter-spacing: 0.06em;
border: 1px solid rgba(0,0,0,0.08); /* kontras cukup pada latar terang */
box-shadow: 0 6px 18px rgba(17,24,39,0.06);
transition: transform .14s ease, box-shadow .14s ease, background .12s ease;
}
/* hover: sedikit lift dan warna lebih tegas */
a.btn:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(17,24,39,0.12);
background: rgba(109, 109, 109, 0.75);
}
/* jika Anda ingin versi gelap ketika navbar scrolled, contoh */
.navbar.scrolled a.btn{
border-color: rgba(0,0,0,0.12);
}
/* optional: make smaller on very small screens */
@media (max-width:450px){
.hasil-survei h2{ font-size:20px }
}
/* responsive */
@media (max-width: 900px){
.hasil-survei{ padding: 36px 12px; }
.title-hasil-survei{ font-size: 20px; margin-bottom: 18px; padding: 0 6px; }
.chart-card{ padding: 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.05); }
.chart-legend{ justify-content: flex-start; gap:10px; }
.hasil-survei .container > canvas,
.hasil-survei .container .chart-canvas{
max-height: 360px;
}
}
/* Override mobile chart sizing: keep chart square and centered */
@media (max-width: 900px){
/* make chart card height auto so chart can keep square aspect */
.chart-wrap{
height: auto; /* allow card to grow */
min-height: 420px; /* optional: keep reasonable minimum */
padding: 12px;
}
/* keep the canvas wrapper square on mobile (prevents gepeng) */
.chart-canvas{
aspect-ratio: 1 / 1 !important; /* force square */
max-width: 360px; /* limit size on narrow screens */
width: 90%;
margin: 10px auto 0;
display: block;
}
/* make the actual