/* Konsensus Kita — gaya bersama semua halaman */
*,
*::before,
*::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: #F2F1EC;
  color: #121212;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #121212; }
a:hover { color: #C41B24; }
a:focus-visible, button:focus-visible, input:focus-visible, label:focus-within {
  outline: 3px solid #1F4FE0;
  outline-offset: 3px;
}

img, svg { max-width: 100%; }

/* Grid utilitas */
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.g5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.hero { display: flex; gap: 48px; align-items: center; }
.navlinks { display: flex; gap: 28px; align-items: center; }
.sila { display: grid; grid-template-columns: 72px minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: center; }

/* Kartu yang bisa diklik sedikit "terangkat" */
a[style*="box-shadow"] { transition: transform .15s ease, box-shadow .15s ease; }
a[style*="box-shadow"]:hover { transform: translate(-2px, -2px); }

.poll-btn[aria-pressed="true"] { background: #FFCE1F !important; color: #121212 !important; }

.quiz-option { transition: transform .1s ease; }
.quiz-option:not(:disabled):hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 #121212; }
.quiz-option:disabled { cursor: default; }

/* Navigasi bawah (hanya di HP) */
.bottom-nav { display: none; }

@media (max-width: 1000px) {
  .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g2, .g3, .two { grid-template-columns: 1fr; }
  .hero { flex-direction: column; align-items: stretch; }
  .navlinks { display: none; }
  .sila { grid-template-columns: 56px minmax(0, 1fr); }
  .sila-simple { grid-column: 2; }
}

@media (max-width: 760px) {
  body { padding-bottom: 84px; }
  .bottom-nav {
    display: flex;
    justify-content: space-around;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    background: #FFFFFF;
    border-top: 2px solid #121212;
    padding: 8px 8px calc(10px + env(safe-area-inset-bottom));
  }
  .bottom-nav a {
    text-decoration: none;
    color: #4A4A4A;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    font-size: 11px; font-weight: 700;
    min-width: 64px; min-height: 44px;
  }
  .bottom-nav a[aria-current="page"] { color: #C41B24; font-weight: 800; }
  [style*="max-width: 1280px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .mini-quiz, #uji-nyali > div { padding: 26px !important; }
}

@media (max-width: 560px) {
  .g4, .g5 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}