:root {
  --primary-color: #00aaff;
  --secondary-color: #f7b733;
  --dark-bg: #000000;
  /* <-- Warna baru HITAM PEKAT */
  --light-text: #e0e0e0;
  --dark-text: #a0a0a0;
  --card-bg: #1a1a1a;
  /* <-- Warna kartu tetap agar ada sedikit kontras */
  --border-color: #333333;
  --app-viewport-height: 100vh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-top-header-height: 60px;
  --mobile-bottom-nav-height: 60px;
  --scroll-lock-top: 0px;
  --font-article-serif: Georgia, "Times New Roman", serif;

  /* Token gerak (motion) — dipakai animasi reveal/stagger homepage */
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-stagger-step: 80ms;
  --ignite-duration: 0.6s;
}

/* Reset dasar yang lebih modern */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--dark-bg);
  color: var(--light-text);
  /* Gunakan warna teks baru */
  font-family: "Poppins", sans-serif;
  line-height: 1.7;
  /* Jarak antar baris yang lebih nyaman */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: var(--app-viewport-height, 100vh);
  font-size: 14px;
  padding-top: 85px;
  overflow-x: hidden;
  scroll-padding-top: 110px;
}

body.modal-open {
  position: fixed;
  top: var(--scroll-lock-top);
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* TAMBAHKAN KODE INI DI BAWAH 'body' */
h1,
h2,
h3,
h4 {
  color: #ffffff;
  letter-spacing: -0.5px;
}

/* ========================================= */
/* === GAYA HEADER (PROFESIONAL STYLE) === */
/* ========================================= */
.logo-main-text {
  font-size: 1.3em;
  font-weight: 700;
  margin: 0;
  color: var(--light-text);
  font-family: "Poppins", sans-serif;
  font-style: italic;
  line-height: 1.1;
}

header#main-header {
  position: fixed;
  top: 0;
  /* Default di atas */
  bottom: auto;
  /* Pastikan properti bottom tidak aktif di desktop */
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    top 0.3s ease,
    bottom 0.3s ease,
    transform 0.3s ease;
  /* Tambahkan transisi transform */
}

header#main-header.hidden-desktop {
  transform: translateY(-100%);
}

body.chatbot-open header#main-header,
body.peta-fullscreen header#main-header {
  transform: translateY(-100%);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 50px;
  border-bottom: 1px solid var(--border-color);
}

.logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.logo img {
  width: 45px;
  /* Ukuran logo diperkecil */
  height: 45px;
  margin-right: 15px;
  transition: transform 0.3s ease;
}

.logo img:hover {
  transform: scale(1.1) rotate(-5deg);
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo h1 {
  font-size: 1.3em;
  /* Diperkecil */
  font-weight: 700;
  margin: 0;
  color: var(--light-text);
  font-family: "Poppins", sans-serif;
  font-style: italic;
  line-height: 1.1;
}

.logo-subtitle {
  font-size: 0.7em;
  /* Diperkecil */
  color: var(--dark-text);
  font-style: italic;
  margin: 0;
  padding: 0;
  font-weight: 700;
}

header nav ul {
  list-style: none;
  display: flex;
  gap: 25px;
  /* Jarak diperkecil */
  margin: 0;
  padding: 0;
}

header nav ul li a {
  text-decoration: none;
  color: var(--light-text);
  font-size: 1em;
  /* Diperkecil */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  position: relative;
  transition: color 0.3s ease;
  font-style: italic;
  font-weight: 700;
}

header nav ul li a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}

header nav ul li a:hover,
header nav ul li.active a {
  color: var(--primary-color);
}

header nav ul li a:hover::after,
header nav ul li.active a::after {
  width: 100%;
}

header nav ul li a span {
  display: inline;
}

.social-media {
  display: flex;
  gap: 14px;
  /* Jarak diperkecil */
  align-items: center;
}

.social-media a {
  color: var(--light-text);
  font-size: 1.3em;
  /* Diperkecil */
  text-decoration: none;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.social-media a:hover {
  color: var(--primary-color);
  transform: scale(1.1);
}

/* ========================================= */
/* ===         KONTEN UTAMA              === */
/* ========================================= */

main {
  width: 100%;
  flex-grow: 1;
}

.container p,
.kegiatan-konten p {
  font-style: italic;
}

.logo-image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0 60px 0;
  padding: 20px 0;
}

.logo-image img {
  max-width: 300px;
  width: 100%;
  height: auto;
}

/* Latar bintang — dulu canvas tsParticles (bundle ~250KB + repaint tiap
   frame gara-gara twinkle). Sekarang murni background CSS statis: nol JS,
   nol biaya per frame, tetap kelihatan sama karena partikel lamanya juga
   diam (move.enable:false). Tiga lapis tile radial-gradient dengan ukuran
   tile berbeda supaya sebarannya gak kelihatan berulang. */
#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(
      1.5px 1.5px at 38px 62px,
      rgba(255, 255, 255, 0.55),
      transparent
    ),
    radial-gradient(
      1px 1px at 154px 21px,
      rgba(255, 255, 255, 0.4),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 219px 178px,
      rgba(255, 255, 255, 0.5),
      transparent
    ),
    radial-gradient(
      1px 1px at 96px 231px,
      rgba(255, 255, 255, 0.34),
      transparent
    ),
    radial-gradient(
      1px 1px at 271px 96px,
      rgba(255, 255, 255, 0.44),
      transparent
    ),
    radial-gradient(
      1px 1px at 12px 128px,
      rgba(255, 255, 255, 0.3),
      transparent
    ),
    radial-gradient(
      2px 2px at 63px 143px,
      rgba(255, 255, 255, 0.6),
      transparent
    ),
    radial-gradient(
      1px 1px at 187px 274px,
      rgba(255, 255, 255, 0.36),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 41px 187px,
      rgba(255, 255, 255, 0.32),
      transparent
    ),
    radial-gradient(
      1px 1px at 322px 58px,
      rgba(255, 255, 255, 0.42),
      transparent
    ),
    radial-gradient(
      1px 1px at 118px 47px,
      rgba(255, 255, 255, 0.38),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 233px 122px,
      rgba(255, 255, 255, 0.28),
      transparent
    ),
    radial-gradient(
      1px 1px at 405px 289px,
      rgba(255, 255, 255, 0.34),
      transparent
    ),
    radial-gradient(
      1px 1px at 76px 351px,
      rgba(255, 255, 255, 0.26),
      transparent
    );
  background-size:
    300px 300px,
    300px 300px,
    300px 300px,
    300px 300px,
    300px 300px,
    300px 300px,
    460px 460px,
    460px 460px,
    460px 460px,
    460px 460px,
    620px 620px,
    620px 620px,
    620px 620px,
    620px 620px;
  background-repeat: repeat;
}

main .container {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
}

.container h2 {
  font-size: 2.5em;
  /* Diperkecil */
  margin-bottom: 10px;
}

.container h3 {
  font-size: 1.8em;
  /* Diperkecil */
  margin-bottom: 20px;
  color: var(--dark-text);
}

.container p {
  font-size: 1em;
  /* Diperkecil */
}

footer {
  text-align: center;
  padding: 20px;
  width: 100%;
  border-top: 1px solid var(--border-color);
  margin-top: auto;
  font-size: 0.8em;
  /* Diperkecil */
}

.separator {
  border: none;
  height: 1px;
  background-color: var(--border-color);
  margin: 50px auto;
  width: 80%;
}

.struktur-organisasi h3 {
  text-align: center;
  font-size: 1.8em;
  /* Diperkecil */
  margin-bottom: 10px;
  color: var(--primary-color);
}

.struktur-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}

.pengurus-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.pengurus-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 170, 255, 0.1);
}

.foto-pengurus {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 20px auto;
  object-fit: cover;
  border: 3px solid var(--border-color);
}

.pengurus-card h4 {
  font-size: 1.1em;
  /* Diperkecil */
  margin-bottom: 5px;
  color: var(--light-text);
}

.pengurus-card p {
  font-size: 0.9em;
  /* Diperkecil */
  color: var(--dark-text);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.gallery-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  cursor: pointer;
}

.gallery-item:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 20px rgba(0, 170, 255, 0.1);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-item {
  position: relative;
  padding-top: 56.25%;
  height: 0;
}

.video-item iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* --- KARTU KEGIATAN (Ukuran Font Diperkecil) --- */
.kegiatan-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* Main Card Container */
.kegiatan-card,
.kegiatan-item {
  background-color: rgba(28, 28, 30, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease,
    background-color 0.3s ease;
  display: flex;
  flex-direction: column;
}

.kegiatan-card:hover,
.kegiatan-item:hover {
  transform: translateY(-5px);
  background-color: rgba(28, 28, 30, 0.8);
  box-shadow: 0 10px 20px rgba(0, 170, 255, 0.12);
}

/* Content Layout (Grid for Desktop) */
.kegiatan-link-wrapper {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 20px;
  align-items: center;
  padding: 20px;
  text-decoration: none;
  color: var(--light-text);
  flex-grow: 1;
}

/* Action Buttons Container */
.kegiatan-actions {
  padding: 0 20px 20px 20px;
  background-color: var(--card-bg);
  display: flex;
  justify-content: flex-start;
  /* Align left */
  gap: 10px;
}

/* Keep original .kegiatan-item grid behavior for backward compatibility if needed, 
   but override for home page (which uses inline styles) */
.kegiatan-item {
  color: var(--light-text);
  text-decoration: none;
}

.kegiatan-foto {
  width: 150px;
  height: 150px;
  border-radius: 6px;
  overflow: hidden;
}

.kegiatan-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-out;
}

.kegiatan-item:hover .kegiatan-foto img {
  transform: scale(1.08);
}

.kegiatan-konten {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0;
}

.kegiatan-konten h3 {
  font-size: 0.95em;
  /* Diperkecil */
  font-weight: 700;
  margin: 0 0 5px 0;
  color: var(--primary-color);
  text-align: left;
  line-height: 1.2;
}

.kegiatan-meta {
  display: block;
  font-size: 0.7em;
  /* Sangat kecil */
  color: #aaa;
  margin-bottom: 8px;
}

.kegiatan-konten p {
  display: -webkit-box;
  font-size: 0.85em;
  /* Diperkecil */
  color: var(--dark-text);
  margin: 0 0 12px 0;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}

.kegiatan-tombol {
  align-self: flex-start;
  padding: 5px 12px;
  /* Diperkecil */
  font-size: 0.75em;
  /* Diperkecil */
  margin-top: auto;
  display: inline-block;
  background-color: var(--primary-color);
  color: var(--light-text);
  border-radius: 5px;
  text-decoration: none;
  font-style: normal;
  font-weight: bold;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.kegiatan-tombol:hover {
  background-color: #0088cc;
  transform: translateY(-2px);
}

/* =================================================================
   REDESIGN KARTU ARTIKEL (HALAMAN KEGIATAN) — bersih & modern.
   Di-scope ke .kegiatan-card agar TIDAK mempengaruhi kartu beranda
   (.kegiatan-item / .highlight-section) maupun komponen lain.
   ================================================================= */
.kegiatan-card {
  border-radius: 16px;
  border-color: rgba(255, 255, 255, 0.08);
  font-family: var(--font-article-serif);
}

.kegiatan-card .kegiatan-link-wrapper {
  grid-template-columns: 150px 1fr;
  gap: 20px;
  align-items: center;
  padding: 20px;
}

.kegiatan-card .kegiatan-foto {
  width: 150px;
  height: 150px;
  border-radius: 6px;
}

.kegiatan-card .kegiatan-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kegiatan-card:hover .kegiatan-foto img {
  transform: scale(1.06);
}

.kegiatan-card .kegiatan-konten {
  justify-content: center;
  text-align: left; /* override alignment center yang ter-inherit */
  height: auto;
  min-width: 0; /* WAJIB di grid 1fr agar teks bisa truncate, tidak overflow */
}

.kegiatan-card .kegiatan-konten h3 {
  font-size: 0.95em;
  line-height: 1.2;
  letter-spacing: 0.2px;
  margin: 0 0 5px 0;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kegiatan-card .kegiatan-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7em;
  color: #9aa0a6;
  margin-bottom: 8px;
  text-align: left;
}

.kegiatan-card .kegiatan-meta i {
  color: var(--primary-color);
  font-size: 0.95em;
}

.kegiatan-card .kegiatan-konten p {
  font-style: normal; /* hilangkan italic yang bikin berantakan */
  text-align: left;
  font-size: 0.85em;
  line-height: 1.55;
  color: var(--dark-text);
  margin: 0 0 12px 0;
  -webkit-line-clamp: 2;
}

.kegiatan-card .kegiatan-tombol {
  padding: 5px 12px;
  font-size: 0.75em;
  border-radius: 5px;
  color: #fff;
  letter-spacing: 0.3px;
}

.kegiatan-card .kegiatan-tombol:hover {
  box-shadow: 0 6px 14px rgba(0, 170, 255, 0.25);
}

/* Mobile: kartu artikel lebih ringkas tapi tetap rapi */
@media (max-width: 768px) {
  .kegiatan-card .kegiatan-link-wrapper {
    grid-template-columns: 90px 1fr;
    gap: 15px;
    padding: 12px;
  }

  .kegiatan-card .kegiatan-foto {
    width: 90px;
    height: 90px;
  }

  .kegiatan-card .kegiatan-konten h3 {
    font-size: 0.9em;
    line-height: 1.2;
  }

  .kegiatan-card .kegiatan-konten p {
    font-size: 0.8em;
    line-height: 1.45;
    margin-bottom: 10px;
  }

  .kegiatan-card .kegiatan-meta {
    font-size: 0.7em;
    margin-bottom: 8px;
  }

  .kegiatan-card .kegiatan-tombol {
    font-size: 0.7em;
    padding: 5px 12px;
  }
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.info-item {
  background-color: rgba(17, 17, 17, 0.8);
  border-left: 5px solid var(--primary-color);
  padding: 20px;
  border-radius: 0 8px 8px 0;
  text-align: left;
}

.info-header {
  flex-direction: column;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.info-header h3 {
  font-size: 1.2em;
  /* Diperkecil */
  color: var(--light-text);
  margin: 0;
}

.info-tag {
  font-size: 0.75em;
  /* Diperkecil */
  font-weight: bold;
  font-style: normal;
  padding: 5px 10px;
  border-radius: 20px;
  color: #fff;
  flex-shrink: 0;
}

.tag-pengumuman {
  background-color: #007bff;
}

.tag-update {
  background-color: #28a745;
}

.tag-penting {
  background-color: #dc3545;
}

.info-meta {
  font-size: 0.8em;
  /* Diperkecil */
  color: #aaa;
  margin-bottom: 20px;
}

.info-meta i {
  margin-right: 8px;
}

.info-body p,
.info-body ul {
  font-size: 0.9em;
  /* Diperkecil */
  line-height: 1.7;
  margin-bottom: 15px;
}

.info-body ul {
  list-style-position: inside;
  padding-left: 10px;
}

.info-umum {
  display: flex;
  gap: 40px;
  text-align: left;
  margin-bottom: 30px;
}

.info-teks {
  flex: 1;
}

.info-teks h3 {
  color: var(--primary-color);
  margin-bottom: 10px;
}

.info-teks p {
  margin-bottom: 20px;
}

.info-teks i {
  color: var(--primary-color);
  margin-right: 15px;
  width: 20px;
  text-align: center;
}

.map-container {
  flex: 1;
  min-width: 300px;
}

.map-container iframe {
  border-radius: 8px;
}

.kontak-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.kontak-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 25px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.kontak-card .jabatan {
  color: var(--dark-text);
  font-size: 0.9em;
  /* Diperkecil */
  margin-top: 0;
  margin-bottom: 15px;
}

.kontak-card .info-kontak {
  font-size: 0.85em;
  /* Diperkecil */
  flex-grow: 1;
  margin: 20px 0;
}

.wa-button {
  display: inline-block;
  background-color: #25d366;
  color: var(--light-text);
  padding: 10px 18px;
  /* Diperkecil */
  border-radius: 50px;
  text-decoration: none;
  font-style: normal;
  font-weight: bold;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
  font-size: 0.9em;
  /* Diperkecil */
}

.wa-button:hover {
  background-color: #1ebe57;
  transform: scale(1.05);
}

.wa-button i {
  margin-right: 10px;
  font-size: 1.1em;
  /* Diperkecil */
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease-out,
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.footer-social-media {
  margin-bottom: 15px;
}

.footer-social-media a {
  color: var(--light-text);
  font-size: 1.4em;
  /* Diperkecil */
  margin: 0 15px;
  transition: color 0.3s ease;
}

.footer-social-media a:hover {
  color: var(--primary-color);
}

.sort-container {
  text-align: left;
  margin-bottom: 25px;
  margin-top: 30px;
  font-style: normal;
}

select.sorter {
  background-color: var(--card-bg);
  color: var(--light-text);
  border: 1px solid var(--border-color);
  padding: 8px 12px;
  border-radius: 5px;
  font-family: "Poppins", sans-serif;
  font-size: 0.9em;
  /* Diperkecil */
  margin-left: 10px;
  cursor: pointer;
}

select.sorter:focus {
  outline: none;
  border-color: var(--primary-color);
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  margin-top: 30px;
}

.album-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.album-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 170, 255, 0.15);
}

.album-cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.album-item:hover .album-cover img {
  transform: scale(1.05);
}

.album-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  color: white;
  padding: 40px 20px 20px 20px;
  text-align: left;
  font-style: normal;
  transition: background 0.3s ease;
}

.album-info h4 {
  font-size: 1.2em;
  /* Diperkecil */
  margin: 0;
}

.album-info p {
  font-size: 0.85em;
  /* Diperkecil */
  margin: 5px 0 0 0;
  color: var(--dark-text);
  font-style: italic;
}

.album-item > a:not(.album-cover) {
  display: none;
}

/* === ARTIKEL COVER SLIDESHOW === */
.artikel-cover-slideshow {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  margin: 16px 0;
}
.slideshow-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.slideshow-track img {
  width: 100%;
  flex-shrink: 0;
  height: 420px;
  object-fit: cover;
}
.slideshow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 1rem;
  transition: background 0.2s;
  z-index: 2;
}
.slideshow-btn:hover {
  background: rgba(0, 0, 0, 0.72);
}
.slideshow-btn.prev {
  left: 10px;
}
.slideshow-btn.next {
  right: 10px;
}
.slideshow-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.slideshow-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
  border: none;
  padding: 0;
}
.slideshow-dot.active {
  background: #fff;
  transform: scale(1.3);
}
@media (max-width: 600px) {
  .slideshow-track img {
    height: 220px;
  }
  .slideshow-btn {
    padding: 7px 10px;
    font-size: 0.85rem;
  }
}

/* === STYLE HALAMAN ARTIKEL (Ukuran Font Diperkecil) === */
.artikel-container {
  max-width: 900px;
  margin: auto;
  padding: 2rem;
  text-align: left;
  background-color: var(--card-bg);
  border-radius: 8px;
  font-family: var(--font-article-serif);
}

.artikel-header {
  font-family: inherit;
}

.artikel-header h2,
.artikel-header h1 {
  font-size: 2.2em;
  /* Diperkecil */
  text-align: left;
  margin-bottom: 15px;
  font-family: inherit;
}

.artikel-meta-info {
  font-size: 0.8em;
  /* Diperkecil */
  color: #aaa;
  margin-bottom: 25px;
  font-style: normal;
  font-family: inherit;
}

.artikel-meta-info span {
  margin-right: 20px;
}

.artikel-meta-info i {
  margin-right: 8px;
  color: var(--primary-color);
}

.artikel-konten {
  font-family: inherit;
}

.artikel-konten h2,
.artikel-konten h3,
.artikel-konten h4 {
  text-align: left;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--primary-color);
  font-size: 1.4em;
  /* Diperkecil */
  font-family: inherit;
}

.artikel-konten p,
.artikel-konten li {
  text-align: justify;
  line-height: 1.7;
  font-size: 1em;
  /* Diperkecil */
  font-style: normal;
  font-family: inherit;
}

.artikel-konten ul {
  list-style-type: disc;
  list-style-position: inside;
  padding-left: 20px;
  font-family: inherit;
}

.artikel-konten ol {
  list-style-type: decimal;
  list-style-position: inside;
  padding-left: 20px;
  font-family: inherit;
}

.artikel-konten blockquote {
  border-left: 4px solid var(--primary-color);
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  font-size: 1em;
  /* Diperkecil */
  color: var(--dark-text);
  text-align: left;
  font-family: inherit;
}

.artikel-konten blockquote cite {
  display: block;
  margin-top: 10px;
  font-weight: bold;
  color: var(--light-text);
  font-family: inherit;
}

.slideshow-container {
  max-width: 800px;
  position: relative;
  margin: auto;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 2rem;
}

.slideshow-slider {
  display: grid;
}

.slide-image {
  grid-area: 1 / 1 / 2 / 2;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.slide-image.active-slide {
  opacity: 1;
}

.tombol-kembali {
  display: inline-block;
  margin-top: 30px;
  background-color: var(--border-color);
  color: var(--light-text);
  padding: 8px 16px;
  /* Diperkecil */
  text-decoration: none;
  font-style: normal;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  font-size: 0.85em;
  /* Diperkecil */
}

.tombol-kembali:hover {
  background-color: var(--primary-color);
}

.tombol-kembali i {
  margin-right: 8px;
}

/* ========================================= */
/* ===         GAYA WELCOME SCREEN       === */
/* ========================================= */

#welcome-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: opacity 0.5s ease;
}

#welcome-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

#welcome-box {
  background-color: var(--card-bg);
  padding: 30px 40px;
  border-radius: 10px;
  text-align: center;
  width: 90%;
  max-width: 400px;
  border: 1px solid var(--border-color);
  box-shadow: 0 5px 25px rgba(0, 170, 255, 0.1);
}

.welcome-logo {
  width: 70px;
  /* Diperkecil */
  height: 70px;
  margin-bottom: 15px;
}

#welcome-box h2 {
  margin-bottom: 5px;
  font-size: 1.8em;
  /* Diperkecil */
  color: var(--primary-color);
}

#welcome-box p {
  font-style: italic;
  font-size: 0.9em;
  /* Diperkecil */
  margin-bottom: 25px;
  color: var(--dark-text);
}

.form-group {
  margin-bottom: 20px;
  text-align: left;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 0.9em;
  /* Diperkecil */
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px;
  /* Diperkecil */
  background-color: var(--dark-bg);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  color: var(--light-text);
  font-family: "Poppins", sans-serif;
  font-size: 0.9em;
  /* Diperkecil */
}

#submit-button {
  width: 100%;
  padding: 10px;
  /* Diperkecil */
  font-size: 0.9em;
  /* Diperkecil */
}

#form-message {
  font-size: 0.8em;
  /* Diperkecil */
}

/* ========================================= */
/* ===     HEADER ATAS MOBILE BARU       === */
/* ========================================= */
.mobile-top-header {
  display: none;
  /* Sembunyikan di desktop */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
  /* Di atas header bawah */
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.3s ease-in-out;
  border-bottom: 1px solid var(--border-color);
  padding-top: var(--safe-top);
  height: calc(var(--mobile-top-header-height) + var(--safe-top));
}

.mobile-top-header.hidden {
  transform: translateY(-100%);
}

.mobile-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 15px;
  height: var(--mobile-top-header-height);
}

/* ========================================= */
/* ===         RESPONSIVE DESIGN         === */
/* ========================================= */

@media (max-width: 768px) {
  body {
    padding-top: calc(var(--mobile-top-header-height) + var(--safe-top));
    padding-bottom: calc(var(--mobile-bottom-nav-height) + var(--safe-bottom));
    font-size: 13px;
    /* Ukuran font dasar mobile diperkecil lagi */
    scroll-padding-top: calc(
      var(--mobile-top-header-height) + var(--safe-top) + 24px
    );
  }

  /* === TAMPILKAN HEADER ATAS MOBILE === */
  .mobile-top-header {
    display: block;
  }

  /* Sembunyikan komponen header desktop yang tidak perlu di mobile */
  header#main-header .header-container .logo,
  header#main-header .header-container .social-media {
    display: none;
  }

  /* PERBAIKAN UTAMA: Tampilkan navigasi di mobile */
  header#main-header .header-container {
    display: block;
    /* UBAH DARI 'none' MENJADI 'block' */
    padding: 0;
    border-bottom: none;
  }

  /* === PINDAHKAN NAVIGASI KE BAWAH DI MOBILE === */
  header#main-header {
    top: auto;
    bottom: 0;
    border-bottom: none;
    height: calc(var(--mobile-bottom-nav-height) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    /* Glassmorphic — semi-transparan + blur */
    background-color: rgba(8, 8, 14, 0.78);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    overflow: hidden;
    transition: transform 0.3s ease;
  }

  /* Gradient border line di bagian atas nav — glow cyan di tengah */
  header#main-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 170, 255, 0.3) 20%,
      rgba(0, 170, 255, 0.75) 50%,
      rgba(247, 183, 51, 0.25) 80%,
      transparent 100%
    );
    pointer-events: none;
  }

  header#main-header.hidden {
    transform: translateY(100%);
  }

  /* Atur Navigasi untuk Tampil di Bawah */
  header nav {
    display: block;
    width: 100%;
    height: 100%;
  }

  header nav ul {
    display: flex;
    justify-content: space-around;
    /* Agar menu tersebar rata */
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 0;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  header nav ul::-webkit-scrollbar {
    display: none;
  }

  header nav ul li {
    flex: 1;
    /* Agar setiap item menu memiliki lebar yang sama */
    text-align: center;
  }

  header nav ul li a {
    flex-direction: column;
    justify-content: center;
    color: var(--dark-text);
    font-size: 0.73em;
    font-weight: 600;
    padding: 4px 2px;
    height: 100%;
    transition:
      color 0.2s ease,
      transform 0.15s ease;
  }

  header nav ul li a i {
    font-size: 1.72em;
    margin-bottom: 3px;
    transition:
      transform 0.2s ease,
      filter 0.2s ease;
  }

  header nav ul li.active a {
    color: var(--primary-color);
  }

  /* Icon aktif: glow + sedikit terangkat */
  header nav ul li.active a i {
    filter: drop-shadow(0 0 8px rgba(0, 170, 255, 0.7));
    transform: translateY(-2px);
  }

  /* Tap/press feedback */
  header nav ul li a:active {
    transform: scale(0.88);
    opacity: 0.65;
    transition:
      transform 0.08s ease,
      opacity 0.08s ease;
  }

  header nav ul li a::after {
    display: none;
    /* Hapus garis bawah aktif di mobile */
  }

  body.contribution-modal-open .mobile-top-header,
  body.chatbot-open .mobile-top-header,
  body.peta-fullscreen .mobile-top-header {
    transform: translateY(-100%);
  }

  body.contribution-modal-open header#main-header,
  body.chatbot-open header#main-header,
  body.peta-fullscreen header#main-header {
    transform: translateY(calc(100% + var(--safe-bottom)));
  }

  body.contribution-modal-open #search-panel.active {
    transform: translateY(-150%);
    visibility: hidden;
  }

  main {
    padding-top: 16px;
    /* Beri sedikit ruang di atas konten */
  }

  /* Penyesuaian font mobile untuk kartu kegiatan */
  .kegiatan-item,
  .kegiatan-link-wrapper {
    grid-template-columns: 90px 1fr;
    /* Gambar lebih kecil */
    gap: 15px;
    padding: 12px;
  }

  .kegiatan-foto {
    width: 90px;
    height: 90px;
  }

  .kegiatan-konten h3 {
    font-size: 0.9em;
  }

  .kegiatan-konten p {
    -webkit-line-clamp: 2;
    font-size: 0.8em;
  }

  .kegiatan-meta,
  .kegiatan-tombol {
    font-size: 0.7em;
  }

  .container h2 {
    font-size: 2em;
  }

  .artikel-header h1,
  .artikel-header h2 {
    font-size: 1.8em;
  }
}

/* ========================================= */
/* ===    GAYA POHON & KONTROL ZOOM      === */
/* ========================================= */

/* --- BAGIAN BARU: Kontrol Zoom --- */
.zoom-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.zoom-btn {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--light-text);
  width: 35px;
  height: 35px;
  border-radius: 50%;
  font-size: 1.5em;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}

.zoom-btn:hover {
  background-color: var(--primary-color);
  color: var(--dark-bg);
  border-color: var(--primary-color);
}

#zoom-level {
  font-size: 1.1em;
  font-weight: bold;
  color: var(--dark-text);
  min-width: 60px;
  text-align: center;
}

/* --- PERUBAHAN: Penyesuaian pada Pohon --- */
.pohon-container {
  width: 100%;
  overflow: auto;
  /* Diubah menjadi auto untuk menangani zoom dan pan */
  text-align: center;
  padding: 20px 0;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  cursor: grab;
  /* Menandakan bisa digeser */
  background-color: rgba(17, 17, 17, 0.5);
}

.pohon-container:active {
  cursor: grabbing;
}

.pohon-organisasi {
  display: inline-flex;
  transition: transform 0.3s ease-out;
  /* Animasi untuk zoom */
  transform-origin: center center;
  /* Titik pusat zoom */
}

.pohon-organisasi ul,
.pohon-organisasi li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.pohon-organisasi ul {
  padding-top: 20px;
  display: flex;
  justify-content: center;
}

.pohon-organisasi li {
  padding: 20px 4px 0 4px;
  text-align: center;
}

.pohon-organisasi li::before,
.pohon-organisasi li::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 2px solid var(--border-color);
  width: 50%;
  height: 20px;
}

.pohon-organisasi li::after {
  right: auto;
  left: 50%;
  border-left: 2px solid var(--border-color);
}

.pohon-organisasi li:only-child::after,
.pohon-organisasi li:only-child::before {
  display: none;
}

.pohon-organisasi li:first-child::before,
.pohon-organisasi li:last-child::after {
  border: 0 none;
}

.pohon-organisasi li:last-child::before {
  border-right: 2px solid var(--border-color);
  border-radius: 0 5px 0 0;
}

.pohon-organisasi li:first-child::after {
  border-radius: 5px 0 0 0;
}

.pohon-organisasi ul ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 2px solid var(--border-color);
  width: 0;
  height: 20px;
}

.pohon-organisasi li div {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  padding: 10px 15px;
  text-decoration: none;
  color: var(--light-text);
  font-family: "Poppins", sans-serif;
  display: inline-block;
  border-radius: 8px;
  min-width: 170px;
  transition: all 0.5s;
  position: relative;
  z-index: 1;
}

.pohon-organisasi li div:hover,
.pohon-organisasi li div:hover + ul li div {
  background: var(--primary-color);
  color: var(--dark-bg);
  box-shadow: 0 0 15px var(--primary-color);
}

.pohon-organisasi li div:hover + ul li::after,
.pohon-organisasi li div:hover + ul li::before,
.pohon-organisasi li div:hover + ul::before,
.pohon-organisasi li div:hover + ul ul::before {
  border-color: var(--primary-color);
}

.pohon-organisasi .jabatan {
  display: block;
  font-size: 0.9em;
  font-weight: 700;
  color: inherit;
  margin-bottom: 4px;
}

.pohon-organisasi .nama {
  display: block;
  font-size: 0.8em;
  font-style: italic;
  color: inherit;
  opacity: 0.8;
}

.pohon-organisasi .bidang-group {
  padding-top: 20px;
}

.pohon-organisasi .bidang-group > li {
  padding: 20px 4px 0 4px;
}

.anggota-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 15px;
  padding-top: 20px;
  width: 100%;
}

.anggota-grid li {
  padding: 0 !important;
  width: 100%;
}

.anggota-grid li::before,
.anggota-grid li::after {
  display: none;
}

.pohon-organisasi li div .foto-node {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  margin: 0 auto 10px auto;
  object-fit: cover;
  display: block;
  background-color: #444;
}

.pohon-organisasi li div .foto-node-placeholder {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--dark-text);
}

/* === DETAIL MODAL PENGURUS === */
.detail-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.detail-modal-overlay.show {
  display: flex;
  opacity: 1;
}

.detail-modal-content {
  background: linear-gradient(
    135deg,
    rgba(28, 28, 30, 0.95),
    rgba(44, 44, 46, 0.95)
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  max-width: 520px;
  width: 100%;
  position: relative;
  animation: detailModalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(0, 170, 255, 0.08);
  overflow: hidden;
}

@keyframes detailModalSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.detail-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.3em;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.detail-modal-close:hover {
  background: rgba(239, 68, 68, 0.7);
  border-color: rgba(239, 68, 68, 0.8);
  transform: rotate(90deg);
}

.detail-modal-body {
  padding: 32px 28px 28px;
  text-align: center;
}

.detail-modal-photo {
  margin-bottom: 20px;
}

.detail-modal-photo img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary-color, #00aaff);
  box-shadow: 0 0 20px rgba(0, 170, 255, 0.25);
}

.detail-foto-placeholder {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid var(--primary-color, #00aaff);
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  color: #666;
  margin: 0 auto;
}

.detail-modal-info h2 {
  font-size: 1.4em;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  font-family: "Poppins", sans-serif;
}

.detail-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.8em;
  font-weight: 600;
  background: linear-gradient(135deg, var(--primary-color, #00aaff), #0077cc);
  color: #fff;
  margin: 0 4px 12px;
}

.detail-badge-bidang {
  background: linear-gradient(135deg, #10b981, #059669);
}

.detail-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  text-align: left;
  margin-top: 16px;
}

.detail-info-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.detail-info-item i {
  color: var(--primary-color, #00aaff);
  font-size: 1em;
  margin-top: 3px;
  flex-shrink: 0;
}

.detail-info-item small {
  color: #888;
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-info-item p {
  color: #e0e0e0;
  font-size: 0.88em;
  margin: 2px 0 0;
  font-weight: 500;
}

.detail-wa-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9em;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.detail-wa-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

/* Node clickable enhancements */
.pohon-organisasi li div.org-node-clickable {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pohon-organisasi li div.org-node-clickable:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 170, 255, 0.25);
}

.pohon-organisasi li div.org-node-clickable::after {
  content: "Klik untuk detail";
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65em;
  color: rgba(0, 170, 255, 0.7);
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  pointer-events: none;
}

.pohon-organisasi li div.org-node-clickable:hover::after {
  opacity: 1;
}

@media (max-width: 600px) {
  .detail-modal-content {
    max-width: 95%;
    border-radius: 16px;
  }
  .detail-modal-body {
    padding: 24px 18px 20px;
  }
  .detail-info-grid {
    grid-template-columns: 1fr;
  }
  .detail-modal-photo img,
  .detail-foto-placeholder {
    width: 90px;
    height: 90px;
  }
}

/* Sisa kode Anda yang tidak terkait font-size bisa tetap sama */

/* ========================================= */
/* ===         GAYA HALAMAN KONTAK BARU    === */
/* ========================================= */

.contact-links-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.contact-link-item {
  background-color: rgba(28, 28, 30, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 25px 30px;
  text-decoration: none;
  color: var(--light-text);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
  font-size: 1.2em;
}

.contact-link-item:hover {
  transform: translateY(-5px);
  background-color: rgba(28, 28, 30, 0.8);
  color: #fff;
  border-color: var(--primary-color);
  box-shadow: 0 8px 20px rgba(0, 170, 255, 0.2);
}

.contact-link-item i {
  font-size: 1.8em;
  width: 40px;
  /* Memberi lebar tetap agar rapi */
  text-align: center;
}

/* ========================================= */
/* ===     GAYA KHUSUS HALAMAN HOME ANIMASI === */
/* ========================================= */

body[data-page-id="home"] main {
  flex-grow: 1;
  width: 100%;
  position: relative;
  /* Penting untuk positioning absolut */
  overflow: hidden;
  /* Sembunyikan logo saat di luar layar */
}

#logo-container {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Menerapkan animasi yang berjalan tanpa henti */
  animation: home-logo-bounce-loop 12s ease-in-out infinite;
}

#animated-logo {
  width: 350px;
  /* Anda bisa menyesuaikan ukuran logo di sini */
  height: auto;
}

@keyframes home-logo-bounce-loop {
  /* FASE 0: Persiapan (Logo di luar layar atas) */
  0% {
    transform: translate(-50%, -150vh) scale(0.8);
    opacity: 0;
  }

  /* FASE 1: Logo Jatuh dengan Cepat (Efek gravitasi) */
  10% {
    transform: translate(-50%, -50%);
    opacity: 1;
    animation-timing-function: ease-in;
    /* Percepat saat jatuh */
  }

  /* FASE 2: Pantulan Halus & Natural (Seperti Bola) */
  12% {
    /* Pantulan 1 (paling tinggi) */
    transform: translate(-50%, -50%) translateY(-100px);
    animation-timing-function: ease-out;
    /* Lambat di puncak pantulan */
  }

  14% {
    transform: translate(-50%, -50%);
    animation-timing-function: ease-in;
  }

  15.5% {
    /* Pantulan 2 (lebih pendek) */
    transform: translate(-50%, -50%) translateY(-50px);
    animation-timing-function: ease-out;
  }

  17% {
    transform: translate(-50%, -50%);
    animation-timing-function: ease-in;
  }

  18% {
    /* Pantulan 3 (paling pendek) */
    transform: translate(-50%, -50%) translateY(-25px);
    animation-timing-function: ease-out;
  }

  19% {
    /* Kembali diam setelah pantulan terakhir */
    transform: translate(-50%, -50%);
  }

  /* FASE 3: Logo Diam di Tengah (durasi disesuaikan) */
  19.01%,
  85% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }

  /* FASE 4: Logo Menghilang ke Kanan, selesai tepat di 100% untuk loop instan */
  100% {
    transform: translate(150vw, -50%) scale(0.8);
    opacity: 0;
    animation-timing-function: ease-in;
  }
}

/* Gaya untuk filter container di halaman kegiatan */
.filter-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  /* Jarak antara filter kategori dan tanggal */
  flex-wrap: wrap;
  /* Agar responsif di layar kecil */
  margin-bottom: 25px;
  margin-top: 30px;
}

.sort-container {
  display: flex;
  align-items: center;
  gap: 10px;
  font-style: normal;
}

/* ... (kode CSS lainnya tetap sama) ... */

/* ========================================= */
/* ===         GAYA HALAMAN LOGIN        === */
/* ========================================= */

.main-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  /* Menggunakan Poppins untuk konsistensi */
  padding: 20px;
}

.centered-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-container {
  width: 100%;
  max-width: 400px;
  /* Lebar maksimum untuk form */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 45px;
  /* Memberi ruang untuk ikon di atas */
}

.icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 85px;
  height: 85px;
  display: grid;
  place-content: center;
  border: 1px solid #2a2a2a;
  z-index: 2;
  border-radius: 50%;
  background: #0e0e0e;
}

.icon .fa {
  color: #a2a2a2;
  font-size: 50px;
}

form {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 60px 30px 25px;
  /* Disesuaikan: padding atas lebih besar untuk ruang ikon */
  border-radius: 30px;
  background: rgba(19, 19, 19, 0.736);
  border: 1px solid rgba(255, 255, 255, 0.097);
  position: relative;
  z-index: 1;
}

.title {
  margin: 0 0 10px 0;
  /* Margin disesuaikan */
  font-size: 24px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.msg {
  color: #fa2929;
  font-size: 14px;
  text-align: center;
  min-height: 20px;
  /* Memberi ruang agar layout tidak bergeser */
  margin-bottom: 15px;
}

.field {
  display: flex;
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  /* Jarak antar field */
}

.field .fa {
  position: absolute;
  font-size: 14px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #7d7d7d;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px rgb(14 14 14) inset;
  -webkit-text-fill-color: #bababa !important;
}

form input,
form select {
  display: block;
  outline: none;
  width: 100%;
  border: none;
  font-size: 16px;
  color: #d2d2d2;
  background: transparent;
  padding: 10px 35px 10px 10px;
  /* Padding disesuaikan */
  border-bottom: 1px solid #404040;
  caret-color: #cccccc;
  transition: border-color 0.3s;
}

form input:focus,
form select:focus {
  border-bottom-color: var(--primary-color);
}

form select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

form select option {
  background-color: #111111;
}

.action {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 14px;
  margin-top: 5px;
  color: #7d7d7d;
}

.action label {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.action input[type="checkbox"] {
  width: auto;
  margin: 0 8px 0 0;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: #9b9b9b;
  transition: color 0.3s;
}

a:hover {
  color: var(--primary-color);
}

.btn-container {
  width: 100%;
  padding-top: 15px;
  transition: 0.2s linear;
}

#login-btn {
  width: 100%;
  padding: 12px 25px;
  /* Padding disesuaikan */
  border: none;
  background: rgb(25, 62, 97);
  color: white;
  font-weight: 600;
  font-size: 16px;
  border-radius: 15px;
  transition: 0.3s;
  cursor: pointer;
}

#login-btn:hover:not(:disabled) {
  background: var(--primary-color);
  transform: translateY(-2px);
}

#login-btn:disabled {
  background-color: #333;
  cursor: not-allowed;
}

.signup {
  color: rgb(112, 112, 112);
  margin-top: 20px;
  font-size: 14px;
  text-align: center;
}

.signup a {
  color: var(--primary-color);
  margin-left: 5px;
  font-weight: bold;
}

/* ... (sisa kode CSS tetap sama) ... */

.shift-left {
  transform: translateX(-120%);
}

.shift-right {
  transform: translateX(120%);
}

.shift-top {
  transform: translateY(-150%);
}

.shift-bottom {
  transform: translateY(150%);
}

.no-shift {
  transform: translate(0%, 0%);
}

/* --- GAYA BARU: PETUNJUK GALERI DENGAN ANIMASI DENYUT --- */

.album-cover {
  position: relative;
  display: block;
}

/* Keyframes untuk animasi denyut/pulse */
@keyframes pulse-animation {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 10px 20px rgba(255, 255, 255, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.click-hint-animated {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  z-index: 2;

  /* Membuatnya jadi lingkaran yang menarik */
  background-color: rgba(0, 170, 255, 0.85);
  /* Warna --primary-color dengan transparansi */
  color: #fff;
  border-radius: 50%;
  width: 90px;
  height: 90px;

  /* Posisi & Tampilan Teks di dalam lingkaran */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-size: 0.9em;
  font-style: normal;
  font-weight: bold;

  /* Menjalankan animasi */
  animation: pulse-animation 2s infinite;

  /* Agar tidak menghalangi klik pada gambar */
  pointer-events: none;
}

.click-hint-animated i {
  font-size: 2em;
  /* Ikon lebih besar */
  margin-bottom: 5px;
}

/* Di layar kecil (mobile), buat ukurannya sedikit lebih kecil */
@media (max-width: 768px) {
  .click-hint-animated {
    width: 80px;
    height: 80px;
    font-size: 0.8em;
  }

  .click-hint-animated i {
    font-size: 1.8em;
  }
}

/* Sembunyikan petunjuk setelah pengguna mengarahkan mouse (di desktop) */
.album-item:hover .click-hint-animated {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ========================================= */
/* ===     GAYA CAROUSEL ALBUM GALERI    === */
/* ========================================= */

#album-grid {
  display: block;
}

.album-carousel-wrapper {
  position: relative;
  margin-top: 20px;
}

.album-carousel {
  display: flex;
  gap: 25px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 15px;
  margin: 0 -15px;
  scroll-snap-type: x mandatory;
}

.album-carousel::-webkit-scrollbar {
  display: none;
}

.album-carousel .album-item {
  flex: 0 0 auto;
  width: 300px;
  scroll-snap-align: start;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(17, 17, 17, 0.7);
  border: 1px solid var(--border-color);
  color: var(--light-text);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5em;
  cursor: pointer;
  display: none;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  z-index: 10;
}

@media (min-width: 769px) {
  .carousel-nav {
    display: flex;
  }
}

.carousel-nav:hover {
  background-color: var(--primary-color);
  color: var(--dark-bg);
}

.carousel-nav.prev {
  left: -20px;
}

.carousel-nav.next {
  right: -20px;
}

@media (max-width: 768px) {
  .album-carousel .album-item {
    width: 80vw;
    max-width: 280px;
  }
}

/* ========================================= */
/* ===      GAYA UNTUK LIGHTGALLERY      === */
/* ========================================= */

/* Membuat cover album memiliki pointer cursor */
.album-cover {
  cursor: pointer;
}

/* Tema gelap untuk lightGallery */
.lg-backdrop {
  background-color: rgba(0, 0, 0, 0.85);
}

.lg-toolbar {
  background-color: rgba(0, 0, 0, 0.7);
}

.lg-sub-html {
  background-color: rgba(0, 0, 0, 0.7);
  color: #eee;
  font-size: 14px;
}

.lg-sub-html h4 {
  font-size: 16px;
  margin: 0;
  padding: 0;
  color: #fff;
}

.lg-prev,
.lg-next {
  color: #fff !important;
}

.lg-icon {
  color: #eee;
}

.lg-icon:hover {
  color: #fff;
}

.lg-outer .lg-thumb-outer {
  background-color: #000;
}

/* Salin semua isi file style.css asli Anda ke sini, lalu tambahkan kode di bawah ini di bagian paling akhir */

.logo-main-text {
  font-size: 1.3em;
  font-weight: 700;
  margin: 0;
  color: var(--light-text);
  font-family: "Poppins", sans-serif;
  font-style: italic;
  line-height: 1.1;
}

/* Mengganti H3 menjadi H2 di kartu kegiatan */
.kegiatan-konten h2 {
  font-size: 0.95em;
  font-weight: 700;
  margin: 0 0 5px 0;
  color: var(--primary-color);
  text-align: left;
  line-height: 1.2;
}

/* Gaya untuk animasi "sedang mengetik" */
.typing-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 17px;
  /* Sesuaikan tinggi agar pas */
}

.typing-indicator span {
  height: 8px;
  width: 8px;
  margin: 0 2px;
  background-color: #8e8e8e;
  border-radius: 50%;
  display: inline-block;
  animation: bounce 1.4s infinite ease-in-out both;
}

/* Atur delay animasi untuk setiap titik agar terlihat berurutan */
.typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

/* Keyframes untuk animasi memantul */
@keyframes bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

/* === GAYA DAFTAR ASPIRASI PUBLIK === */
#aspirasi-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.aspirasi-item {
  background-color: rgba(17, 17, 17, 0.8);
  border-left: 5px solid var(--primary-color);
  padding: 20px 25px;
  border-radius: 0 8px 8px 0;
  text-align: left;
}

.aspirasi-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.aspirasi-header h3 {
  font-size: 1.2em;
  color: var(--light-text);
  margin: 0;
}

.aspirasi-meta {
  font-size: 0.8em;
  color: #aaa;
  margin-bottom: 15px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.aspirasi-body p {
  line-height: 1.7;
  font-style: normal;
  margin-bottom: 0;
}

.status-tag {
  font-size: 0.75em;
  font-weight: bold;
  font-style: normal;
  padding: 5px 12px;
  border-radius: 20px;
  color: #fff;
  flex-shrink: 0;
}

.status-diterima-dan-akan-diterapkan {
  background-color: #28a745;
}

.status-sedang-didiskusikan {
  background-color: #ffc107;
  color: #000;
}

.status-ditolak {
  background-color: #dc3545;
}

.tanggapan-pengurus {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--border-color);
}

.tanggapan-pengurus strong {
  color: var(--primary-color);
}

.tanggapan-pengurus p {
  font-style: italic;
  color: var(--dark-text);
  margin-top: 5px;
}

/* === GAYA UNTUK TEKS YANG BISA DILIPAT (COLLAPSIBLE) === */
.collapsible-container {
  max-width: 800px;
  margin: 0 auto 40px auto;
  position: relative;
  text-align: left;
  background-color: var(--card-bg);
  padding: 30px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.collapsible-title {
  text-align: center;
  color: var(--light-text);
  margin: 0 auto 25px auto;
  font-size: 1.6em;
  font-weight: bold;
  font-style: italic;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 15px;
}

#intro-text-wrapper {
  transition: max-height 0.7s ease-in-out;
  overflow: hidden;
}

#intro-text-wrapper.collapsed {
  max-height: 120px;
  /* Atur tinggi awal saat terlipat */
  position: relative;
}

/* Efek gradien agar potongan teks terlihat halus */
#intro-text-wrapper.collapsed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, var(--card-bg), transparent);
  pointer-events: none;
  /* Agar tidak menghalangi seleksi teks */
}

.toggle-button {
  background-color: transparent;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  font-family: "Poppins", sans-serif;
  transition: all 0.3s ease;
  display: block;
  margin: 20px auto 0 auto;
  /* Memberi jarak dari teks */
}

.toggle-button:hover {
  background-color: var(--primary-color);
  color: var(--dark-bg);
}

/* Penyesuaian agar form tidak terlalu menempel dengan intro */
.form-aspirasi {
  margin-top: 40px;
}

/* GAYA BARU UNTUK FEED ARTIKEL */
.filter-tabs {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
}

.tab-btn {
  background-color: transparent;
  border: 1px solid var(--border-color);
  color: var(--light-text);
  padding: 8px 18px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-btn.active,
.tab-btn:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--dark-bg);
}

.artikel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 25px;
}

.artikel-card {
  background-color: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  font-family: var(--font-article-serif);
}

.artikel-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 170, 255, 0.15);
}

.artikel-card .card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card-content {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.card-content h3 {
  font-size: 1.1em;
  margin: 0 0 10px 0;
}

.card-meta {
  font-size: 0.8em;
  color: var(--dark-text);
  margin-bottom: 15px;
}

.card-excerpt {
  font-size: 0.9em;
  flex-grow: 1;
  margin-bottom: 20px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.read-more-btn {
  text-decoration: none;
  font-weight: bold;
  color: var(--primary-color);
}

.interaction-buttons .btn-icon {
  background: none;
  border: none;
  color: var(--dark-text);
  cursor: pointer;
  font-size: 1.2em;
  margin-left: 15px;
}

.interaction-buttons .btn-icon:hover {
  color: var(--primary-color);
}

/* --- HERO SECTION --- */
.hero-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 40px);
  padding: 10px 0 clamp(24px, 4vw, 30px) 0;
  text-align: left;
}

/* ... existing styles ... */

/* --- ABOUT & GENERIC PAGE HERO SECTION --- */
.about-hero-section,
.page-hero-section {
  text-align: center;
  padding: 20px 0 40px 0;
  position: relative;
}

.about-hero-section .typewriter-title,
.page-hero-section .typewriter-title {
  justify-content: center;
  font-size: 2.5em;
  margin-bottom: 15px;
}

.about-hero-section .typewriter-description,
.page-hero-section .typewriter-description {
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.8;
}

/* === MODERN VISI-MISI CARDS === */
.visi-misi-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  text-align: left;
  max-width: 1000px;
  margin: 0 auto;
}

.visi,
.misi {
  background: rgba(26, 26, 26, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 32px 30px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.visi::before,
.misi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--primary-color),
    #0088cc,
    var(--primary-color)
  );
  background-size: 200% 100%;
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.visi:hover,
.misi:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 170, 255, 0.12);
  border-color: rgba(0, 170, 255, 0.25);
}

/* Icon badge for Visi */
.visi::after {
  content: "\f06e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 1.2em;
  color: var(--primary-color);
  opacity: 0.4;
}

/* Icon badge for Misi */
.misi::after {
  content: "\f005";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 1.2em;
  color: var(--primary-color);
  opacity: 0.4;
}

.visi-misi-container h3,
.typewriter-section-title {
  color: #fff;
  margin-bottom: 18px;
  font-size: 1.5em;
  font-weight: 700;
  position: relative;
  display: inline-block;
}

.visi-misi-container h3::after,
.typewriter-section-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--primary-color);
  border-radius: 2px;
  margin-top: 8px;
}

.typewriter-section-content,
.visi p {
  color: var(--light-text);
  line-height: 1.8;
  font-size: 0.95em;
}

/* === MODERN MISI LIST === */
.misi-list {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.misi-item-typewriter {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  text-indent: 0;
  margin-bottom: 0;
  line-height: 1.7;
  color: var(--light-text);
  font-size: 0.93em;
  transition: color 0.3s ease;
}

.misi-item-typewriter::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--primary-color);
  font-size: 1.1em;
  flex-shrink: 0;
  margin-top: 2px;
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

.misi-item-typewriter:hover {
  color: #fff;
}

.misi-item-typewriter:hover::before {
  transform: scale(1.15);
  filter: drop-shadow(0 0 4px rgba(0, 170, 255, 0.4));
}

.misi-item-cursor {
  font-weight: 100;
  color: var(--primary-color);
  animation: blink 0.7s infinite;
  margin-left: 2px;
}

.hero-content {
  flex: 1;
}

.hero-greeting {
  font-size: clamp(2rem, 5vw, 2.8em);
  line-height: 1.2;
  margin-bottom: 10px;
  color: var(--primary-color);
}

.hero-identity {
  margin-bottom: 24px;
  font-size: clamp(1.9rem, 4vw, 3.15rem);
  line-height: 1.08;
  font-weight: 700;
  color: #ffffff;
  min-height: calc(2.2em + 0.3rem);
  text-wrap: balance;
  text-shadow: 0 8px 30px rgba(0, 170, 255, 0.16);
}

.hero-identity::after {
  content: "";
  display: block;
  width: min(240px, 42vw);
  height: 2px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(0, 170, 255, 0.95),
    rgba(247, 183, 51, 0.55),
    rgba(247, 183, 51, 0)
  );
}

.hero-identity__prefix {
  display: inline-block;
  color: #7cdcff;
  margin-right: 0.22em;
  transition: opacity 0.42s ease;
  will-change: opacity;
}

/* Group switch: prefix diam di tempat, cuma crossfade opacity (gak slide). */
.hero-identity__prefix.is-leaving {
  opacity: 0;
}

.hero-identity__prefix.is-entering {
  opacity: 0;
  transition: none;
}

.hero-identity__dynamic {
  color: #ffffff;
}

.hero-identity__caret {
  display: inline-block;
  margin-left: 0.08em;
  color: var(--secondary-color);
  animation: hero-caret-blink 1s steps(1, end) infinite;
  transform: translateY(-0.02em);
}

.hero-identity__caret.is-hidden {
  display: none;
}

@keyframes hero-caret-blink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

.hero-description {
  font-size: clamp(1rem, 2.3vw, 1.1em);
  color: var(--dark-text);
  margin-bottom: clamp(22px, 4vw, 30px);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-image {
  flex-basis: clamp(220px, 34vw, 300px);
  filter: drop-shadow(0 12px 30px rgba(0, 170, 255, 0.22));
  transition:
    filter 0.4s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, filter;
  transform-style: preserve-3d;
}

.hero-image:hover {
  filter: drop-shadow(0 16px 40px rgba(247, 183, 51, 0.35));
}

.hero-image img {
  width: 100%;
  /* WAJIB: <img> punya atribut width/height (untuk cegah layout shift).
     Tanpa height:auto, tinggi dari atribut HTML yang dipakai — logonya jadi
     setinggi 1024px dan hero berantakan. */
  height: auto;
  display: block;
  animation: float 6s ease-in-out infinite;
  will-change: transform;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes heroLogoGlow {
  0% {
    filter: drop-shadow(0 6px 18px rgba(0, 170, 255, 0.18));
  }

  100% {
    filter: drop-shadow(0 10px 30px rgba(247, 183, 51, 0.3));
  }
}

/* --- TYPEWRITER ANIMATION STYLES --- */
.typewriter-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  min-height: 1.2em;
}

.typewriter-description {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  min-height: 1.5em;
}

.typewriter-prefix {
  display: inline;
  color: var(--primary-color);
  font-weight: 600;
  margin-right: 0.28em;
  transition:
    opacity 0.42s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* Group switch: current prefix rises up & fades out... */
.typewriter-prefix.is-leaving {
  opacity: 0;
  transform: translateY(-12px);
}

/* ...then the next prefix pops in from below (snap, then animate up). */
.typewriter-prefix.is-entering {
  opacity: 0;
  transform: translateY(14px);
  transition: none;
}

.typewriter-text {
  display: inline;
}

.typewriter-cursor {
  display: inline-block;
  font-weight: 100;
  font-size: 1em;
  color: var(--primary-color);
  animation: blink 0.7s infinite;
  margin-left: 2px;
}

.typewriter-cursor.secondary-cursor {
  opacity: 0;
}

.typewriter-cursor.secondary-cursor.active {
  opacity: 1;
}

.typewriter-cursor.hidden {
  opacity: 0;
  animation: none;
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

/* --- ENHANCED HERO BUTTON --- */
.hero-button-animated {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--primary-color) 0%, #0077cc 100%);
  color: #ffffff;
  padding: 14px clamp(20px, 5vw, 30px);
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1em;
  min-height: 54px;
  max-width: 100%;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 170, 255, 0.3);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
  transform: translateY(20px);
}

.hero-button-animated.visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-button-animated:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 170, 255, 0.5);
  background: linear-gradient(135deg, #00bbff 0%, #0088dd 100%);
}

.hero-button-animated .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.hero-button-animated:hover .btn-icon {
  transform: translateX(5px);
}

.hero-button-animated .btn-text {
  position: relative;
  z-index: 1;
}

.hero-button-animated .btn-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
}

.hero-button-animated:hover .btn-shine {
  left: 100%;
}

/* Pulse animation for button after typewriter completes */
@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 4px 15px rgba(0, 170, 255, 0.3);
  }

  50% {
    box-shadow:
      0 4px 25px rgba(0, 170, 255, 0.6),
      0 0 40px rgba(0, 170, 255, 0.2);
  }
}

.hero-button-animated.pulse {
  animation: pulse-glow 2s ease-in-out 3;
}

/* --- VISI MISI TYPEWRITER STYLES --- */
.typewriter-section-title {
  display: flex;
  align-items: baseline;
  color: var(--primary-color);
  margin-bottom: 15px;
  font-size: 1.6em;
}

.typewriter-section-content {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  line-height: 1.8;
}

.misi-list {
  list-style-type: none;
  padding-left: 0;
}

.misi-item-typewriter {
  display: flex;
  align-items: baseline;
  padding-left: 1.5em;
  text-indent: -1.5em;
  margin-bottom: 10px;
}

.misi-item-typewriter::before {
  content: "✓";
  color: var(--primary-color);
  margin-right: 10px;
}

.misi-item-cursor {
  font-weight: 100;
  color: var(--primary-color);
  animation: blink 0.7s infinite;
  margin-left: 2px;
}

/* --- QUICK LINKS SECTION --- */
.quick-links-section h2 {
  text-align: center;
  font-size: 2em;
  margin-bottom: 30px;
}

.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.quick-link-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  background: linear-gradient(
    145deg,
    rgba(28, 28, 30, 0.85),
    rgba(18, 18, 26, 0.8)
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  text-decoration: none;
  color: var(--light-text);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease,
    border-color 0.3s ease;
  transform-style: preserve-3d;
  gap: 15px;
  will-change: transform;
}

.quick-link-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--secondary-color)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.quick-link-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(0, 170, 255, 0.18),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.quick-link-item > * {
  position: relative;
  z-index: 2;
}

.quick-link-item i {
  font-size: 2.5em;
  color: var(--primary-color);
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.3s ease,
    text-shadow 0.3s ease;
}

.quick-link-item span {
  font-weight: 600;
  font-size: 1.1em;
  transition: color 0.3s ease;
}

.quick-link-item:hover {
  transform: translateY(-8px);
  box-shadow:
    0 22px 45px rgba(0, 170, 255, 0.18),
    0 0 30px rgba(247, 183, 51, 0.08);
}

.quick-link-item:hover::before,
.quick-link-item:hover::after {
  opacity: 1;
}

.quick-link-item:hover i {
  transform: scale(1.18) rotate(-8deg);
  color: var(--secondary-color);
  text-shadow: 0 0 18px rgba(247, 183, 51, 0.45);
}

.quick-link-item:hover span {
  color: #fff;
}

.quick-link-item:focus-visible {
  outline: none;
}

.quick-link-item:focus-visible::before {
  opacity: 1;
}

.quick-links-grid .quick-link-item {
  animation-delay: calc(var(--i, 0) * var(--motion-stagger-step));
}

.quick-links-section.visible .quick-link-item {
  animation: ignite-reveal var(--ignite-duration) var(--motion-ease) both;
  animation-delay: calc(var(--i, 0) * var(--motion-stagger-step));
}

@keyframes ignite-reveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Feedback sentuh (touchstart) — kartu tak punya state hover di layar sentuh */
.quick-link-item.is-touched {
  transform: translateY(-4px) scale(1.03);
  box-shadow:
    0 14px 30px rgba(0, 170, 255, 0.22),
    0 0 22px rgba(247, 183, 51, 0.12);
  border-color: rgba(0, 170, 255, 0.4);
}

.quick-link-item.is-touched::before,
.quick-link-item.is-touched::after {
  opacity: 1;
}

.quick-link-item.is-touched i {
  color: var(--secondary-color);
  text-shadow: 0 0 14px rgba(247, 183, 51, 0.4);
}

/* --- HIGHLIGHT SECTION --- */
.highlight-section {
  padding: 40px 0;
}

.highlight-section h2 {
  text-align: center;
  font-size: 2em;
  margin-bottom: 30px;
}

.highlight-section h2 i {
  color: var(--primary-color);
  margin-right: 10px;
}

.kegiatan-list-home {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
  margin-bottom: 30px;
}

/* Default 1 kolom */
@media (min-width: 600px) {
  .kegiatan-list-home {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 2 kolom di tablet */
@media (min-width: 900px) {
  .kegiatan-list-home {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 3 kolom di desktop */

/* === MODERN CARD STYLE FOR HOME PAGE KEGIATAN === */
.highlight-section .kegiatan-item {
  background: rgba(26, 26, 26, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  transition:
    transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  position: relative;
}

.highlight-section .kegiatan-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 170, 255, 0.15);
  border-color: rgba(0, 170, 255, 0.3);
}

.highlight-section .kegiatan-foto {
  width: 100%;
  height: 180px;
  position: relative;
  overflow: hidden;
}

.highlight-section .kegiatan-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.highlight-section .kegiatan-item:hover .kegiatan-foto img {
  transform: scale(1.06);
}

.highlight-section.visible .kegiatan-item {
  animation: ignite-reveal var(--ignite-duration) var(--motion-ease) both;
}
.highlight-section.visible .kegiatan-item:nth-child(1) {
  animation-delay: 0ms;
}
.highlight-section.visible .kegiatan-item:nth-child(2) {
  animation-delay: 90ms;
}
.highlight-section.visible .kegiatan-item:nth-child(3) {
  animation-delay: 180ms;
}

/* Shine motif — bahasa visual sama dengan .btn-shine tombol hero */
.highlight-section .kegiatan-foto::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  z-index: 3;
  pointer-events: none;
}

.highlight-section .kegiatan-item:hover .kegiatan-foto::before {
  left: 130%;
}

/* Date badge overlay */
.highlight-section .date-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.7em;
  font-weight: 600;
  font-style: normal;
  line-height: 1.3;
  text-align: center;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
}

.highlight-section .date-badge .day {
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1;
}

.highlight-section .date-badge .month {
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.85;
}

/* Gradient overlay on image */
.highlight-section .kegiatan-foto::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  pointer-events: none;
}

.highlight-section .kegiatan-konten {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.highlight-section .kegiatan-konten h2 {
  font-size: 1em;
  font-weight: 700;
  margin: 0;
  color: #fff;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.highlight-section .kegiatan-item:hover .kegiatan-konten h2 {
  color: var(--primary-color);
}

.highlight-section .kegiatan-konten p {
  margin: 0;
}

.highlight-section .kegiatan-meta {
  font-size: 0.75em;
  color: var(--dark-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.highlight-section .kegiatan-meta i {
  color: var(--primary-color);
  font-size: 0.9em;
}

/* Category tag pill */
.highlight-section .category-tag {
  display: inline-block;
  background: rgba(0, 170, 255, 0.15);
  color: var(--primary-color);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.65em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-style: normal;
  align-self: flex-start;
}

/* Read more link modern */
.highlight-section .read-more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85em;
  font-style: normal;
  margin-top: auto;
  transition:
    gap 0.3s ease,
    color 0.3s ease;
}

.highlight-section .read-more-link i {
  font-size: 0.85em;
  transition: transform 0.3s ease;
}

.highlight-section .read-more-link:hover {
  gap: 12px;
}

.highlight-section .read-more-link:hover i {
  transform: translateX(3px);
}

.view-all-button {
  display: block;
  width: fit-content;
  margin: 20px auto 0 auto;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
  font-style: normal;
}

.view-all-button i {
  transition: transform 0.3s ease;
}

.view-all-button:hover i {
  transform: translateX(5px);
}

@media (max-width: 768px) {
  .hero-section {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 14px;
    padding-top: 0;
  }

  .hero-greeting {
    font-size: clamp(1.75rem, 8vw, 2.2rem);
    margin-bottom: 14px;
  }

  .hero-identity {
    text-align: left;
    font-size: clamp(1.55rem, 8vw, 2.45rem);
    min-height: calc(2.45em + 0.2rem);
    margin-bottom: 20px;
  }

  .hero-identity::after {
    margin-left: 0;
    margin-right: auto;
  }

  .hero-description {
    text-align: left;
    font-size: 0.95rem;
    margin-bottom: 18px;
  }

  .hero-image {
    order: -1;
    align-self: center;
    width: min(58vw, 260px);
    flex-basis: auto;
    animation: heroLogoGlow 4s ease-in-out infinite alternate;
  }

  /* Typewriter responsive styles */
  .typewriter-title {
    justify-content: center;
  }

  .typewriter-description {
    justify-content: center;
    min-height: 3.6em;
    align-content: flex-start;
  }

  .hero-button-animated {
    width: min(100%, 340px);
    min-height: 52px;
    padding: 12px 18px;
    font-size: 0.95em;
  }

  .hero-button-animated .btn-text {
    line-height: 1.35;
  }
}

@media (max-width: 768px) and (max-height: 740px) {
  .hero-section {
    gap: 10px;
    padding-top: 0;
  }

  .hero-image {
    width: min(45vw, 200px);
  }

  .hero-description {
    margin-bottom: 14px;
  }
}

/* ========================================= */
/* ===      GAYA KOMPONEN TERPADU        === */
/* ========================================= */

/* Gaya Tombol Terpadu */
.btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 50px;
  /* Membuat tombol lebih modern (bentuk pil) */
  text-decoration: none;
  font-weight: bold;
  font-style: normal;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary {
  background-color: var(--primary-color);
  color: #000;
}

.btn-primary:hover {
  background-color: #0099e6;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 170, 255, 0.2);
}

/* Gaya Kartu Terpadu */
.card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  /* Sudut lebih tumpul dan modern */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  border-color: var(--primary-color);
}

/* ... CSS lainnya ... */

/* =================================================== */
/* === BAGIAN TESTIMONI (GAYA CAROUSEL BARU) === */
/* =================================================== */

.testimonial-section h2 {
  text-align: center;
  font-size: 2em;
  margin-bottom: 10px;
  font-family: "Poppins", sans-serif;
  font-style: normal;
}

.testimonial-carousel-wrapper {
  position: relative;
  margin-top: 20px;
}

.testimonial-carousel {
  display: flex;
  gap: 25px;
  overflow-x: auto;
  scroll-behavior: auto; /* Diubah ke auto agar animasi JS lebih smooth */
  scrollbar-width: none;
  padding: 15px;
  margin: 0 -15px;
  scroll-snap-type: none; /* Dinonaktifkan untuk scroll kontinyu yang mulus */
  align-items: flex-start;
}

.testimonial-carousel::-webkit-scrollbar {
  display: none;
}

.testimonial-card {
  flex: 0 0 auto;
  width: 300px;
  scroll-snap-align: start;
  background-color: rgba(28, 28, 30, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-sizing: border-box;
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease,
    background-color 0.4s ease;
}

.testimonial-card:hover {
  transform: translateY(-3px);
  background-color: rgba(28, 28, 30, 0.75);
  box-shadow: 0 8px 16px rgba(0, 170, 255, 0.1);
}

.testimonial-section.visible .testimonial-card {
  animation: ignite-reveal var(--ignite-duration) var(--motion-ease) both;
}
.testimonial-section.visible .testimonial-card:nth-child(1) {
  animation-delay: 0ms;
}
.testimonial-section.visible .testimonial-card:nth-child(2) {
  animation-delay: 70ms;
}
.testimonial-section.visible .testimonial-card:nth-child(3) {
  animation-delay: 140ms;
}
.testimonial-section.visible .testimonial-card:nth-child(4) {
  animation-delay: 210ms;
}
.testimonial-section.visible .testimonial-card:nth-child(n + 5) {
  animation-delay: 260ms;
}

.testimonial-header {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 12px;
}

.testimonial-header img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
  color: transparent;
  font-size: 0;
}

.testimonial-user {
  font-style: normal;
}

.testimonial-user .name {
  font-weight: bold;
  font-size: 1em;
  color: var(--light-text);
}

.testimonial-user .handle {
  font-size: 0.9em;
  color: var(--dark-text);
}

.testimonial-body {
  font-style: normal;
  color: #d1d1d6;
  line-height: 1.6;
  flex-grow: 1;
  font-size: 0.95em;
  text-align: left;
  transition: max-height 0.6s ease-in-out;
  /* Animasi lebih smooth untuk teks */
  overflow: hidden;
  /* Sembunyikan teks yang meluap */
}

.testimonial-footer a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 8px 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: #58a6ff;
  text-decoration: none;
  font-weight: bold;
  font-style: normal;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.testimonial-footer a:hover {
  background-color: rgba(88, 166, 255, 0.15);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .testimonial-card {
    width: 80vw;
    max-width: 280px;
  }
}

/* =================================================== */
/* === GAYA UNTUK FITUR "BACA SELENGKAPNYA"      === */
/* =================================================== */

.testimonial-body .full-text {
  display: none;
  /* Sembunyikan teks lengkap secara default */
}

.testimonial-body.expanded .short-text {
  display: none;
  /* Sembunyikan teks pendek saat dibuka */
}

.testimonial-body.expanded .full-text {
  display: inline;
  /* Tampilkan teks lengkap saat dibuka */
}

.testimonial-body .read-more-btn {
  display: inline;
}

.testimonial-body.expanded .read-more-btn {
  display: none;
  /* Sembunyikan tombol saat sudah dibuka */
}

.read-more-btn {
  background: none;
  border: none;
  color: var(--primary-color);
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  margin-left: 5px;
  /* Jarak dari teks */
  font-family: "Poppins", sans-serif;
  font-size: 0.95em;
  /* Samakan dengan font body */
  font-style: normal;
  transition:
    opacity 0.3s ease,
    color 0.3s ease;
}

.read-more-btn:hover {
  text-decoration: underline;
  opacity: 0.8;
}

/* ========================================= */
/* === GAYA MODAL KONTRIBUSI (PREMIUM)   === */
/* ========================================= */
#contribution-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  height: var(--app-viewport-height, 100vh);
  background: rgba(10, 10, 14, 0.88);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.35s ease;
  padding: max(18px, calc(var(--safe-top) + 18px)) clamp(14px, 4vw, 28px)
    max(18px, calc(var(--safe-bottom) + 18px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

#contribution-modal:not(.hidden) {
  opacity: 1;
  visibility: visible;
}

#contribution-modal.hidden {
  pointer-events: none;
}

#contribution-modal .modal-content {
  background: linear-gradient(
    145deg,
    rgba(30, 30, 34, 0.95),
    rgba(20, 20, 24, 0.98)
  );
  padding: clamp(24px, 5vw, 38px);
  border-radius: 24px;
  text-align: left;
  width: min(100%, 560px);
  max-height: min(
    760px,
    calc(
      var(--app-viewport-height, 100vh) -
        max(36px, calc(var(--safe-top) + var(--safe-bottom) + 36px))
    )
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 30px rgba(0, 170, 255, 0.15);
  position: relative;
  display: flex;
  flex-direction: column;
  transform: scale(0.96) translateY(24px);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  margin: auto;
}

/* Aksen cahaya redup di dalam modal untuk kesan premium */
#contribution-modal .modal-content::before {
  content: "";
  position: absolute;
  top: -50px;
  left: -50px;
  right: -50px;
  height: 100px;
  background: radial-gradient(
    circle,
    rgba(0, 170, 255, 0.2) 0%,
    transparent 70%
  );
  pointer-events: none;
}

#contribution-modal:not(.hidden) .modal-content {
  transform: scale(1) translateY(0);
}

#contribution-modal .modal-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 34px;
}

#contribution-modal .modal-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 170, 255, 0.12);
  border: 1px solid rgba(0, 170, 255, 0.18);
  color: #8ed8ff;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#contribution-modal .modal-icon {
  font-size: 3.5em;
  background: linear-gradient(135deg, #00aaff, #00ffaa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
  filter: drop-shadow(0 4px 6px rgba(0, 170, 255, 0.3));
  animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

#contribution-modal .modal-content h2 {
  font-size: 1.8em;
  font-family: inherit;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

#contribution-modal .modal-content p {
  font-size: 1.05em;
  color: #a0a0b0;
  line-height: 1.7;
}

#contribution-modal .modal-content p strong {
  color: #fff;
  font-weight: 600;
}

#contribution-modal .modal-intro {
  max-width: 44ch;
}

#contribution-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  margin-top: 22px;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 170, 255, 0.45) transparent;
}

#contribution-modal .modal-body::-webkit-scrollbar {
  width: 6px;
}

#contribution-modal .modal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 170, 255, 0.35);
  border-radius: 999px;
}

#contribution-modal .modal-feature-list {
  display: grid;
  gap: 12px;
}

#contribution-modal .modal-feature-list span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #d9e8f3;
  font-size: 0.96em;
  font-weight: 500;
}

#contribution-modal .modal-feature-list i {
  color: var(--primary-color);
  font-size: 1em;
}

#contribution-modal .modal-helper-text {
  color: #c0c9d4;
}

#contribution-modal .modal-fallback-link {
  display: none;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  color: #8ed8ff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed rgba(142, 216, 255, 0.45);
  padding-bottom: 2px;
}

#contribution-modal .modal-fallback-link.visible {
  display: inline-flex;
}

#contribution-modal .modal-fallback-link:hover {
  color: #c8eeff;
  border-bottom-color: rgba(200, 238, 255, 0.7);
}

#contribution-modal .modal-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

#contribution-modal .modal-footer {
  position: sticky;
  bottom: 0;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(
    180deg,
    rgba(23, 23, 27, 0) 0%,
    rgba(23, 23, 27, 0.92) 28%,
    rgba(23, 23, 27, 1) 100%
  );
}

#contribution-modal .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  font-size: 1rem;
}

#contribute-yes-btn {
  background: linear-gradient(135deg, var(--primary-color), #00c3ff);
  color: #000;
  font-weight: 700;
  border: none;
  border-radius: 50px;
  padding: 12px 28px;
  box-shadow: 0 4px 15px rgba(0, 170, 255, 0.3);
  transition: all 0.3s ease;
}

#contribute-yes-btn:hover {
  box-shadow: 0 8px 25px rgba(0, 170, 255, 0.5);
  transform: translateY(-2px);
  background: linear-gradient(135deg, #1ab5ff, #00d4ff);
}

#contribute-yes-btn.is-loading {
  opacity: 0.85;
  transform: scale(0.98);
  pointer-events: none;
}

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.05);
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 500;
  border-radius: 50px;
  padding: 12px 28px;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: translateY(-2px);
}

#contribution-modal .modal-close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 1.5em;
  color: #888;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

#contribution-modal .modal-close-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(90deg);
}

/* ========================================= */
/* ===   PENYESUAIAN RESPONSIVE MODAL    === */
/* ========================================= */

@media (max-width: 768px) {
  #contribution-modal {
    align-items: flex-start;
  }

  #contribution-modal .modal-content {
    max-height: calc(
      var(--app-viewport-height, 100vh) -
        max(24px, calc(var(--safe-top) + var(--safe-bottom) + 24px))
    );
    padding: 24px 20px 20px;
    border-radius: 22px;
  }

  #contribution-modal .modal-header {
    gap: 12px;
    padding-right: 36px;
  }

  #contribution-modal .modal-icon {
    font-size: 3em;
  }

  #contribution-modal .modal-content h2 {
    font-size: 1.5em;
  }

  #contribution-modal .modal-content p {
    font-size: 0.95em;
  }

  #contribution-modal .modal-actions {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  #contribution-modal .modal-actions .btn {
    width: 100%;
  }

  #contribution-modal .modal-feature-list span {
    font-size: 0.93em;
    padding: 11px 12px;
  }
}

@media (max-width: 480px), (max-height: 720px) {
  #contribution-modal .modal-content {
    border-radius: 18px;
    padding: 22px 18px 18px;
  }

  #contribution-modal .modal-body {
    gap: 14px;
    margin-top: 18px;
  }

  #contribution-modal .modal-footer {
    margin-top: 16px;
    padding-top: 14px;
  }
}

@media (max-height: 620px) {
  #contribution-modal .modal-icon {
    font-size: 2.45em;
  }

  #contribution-modal .modal-content h2 {
    font-size: 1.35em;
  }

  #contribution-modal .modal-intro,
  #contribution-modal .modal-content p,
  #contribution-modal .modal-feature-list span {
    font-size: 0.9em;
  }
}

/* ========================================= */
/* ===   PENYESUAIAN TAMPILAN MOBILE     === */
/* ========================================= */

@media (max-width: 768px) {
  /* MODIFIKASI UNTUK FILTER ARTIKEL DI MOBILE */
  .filter-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Membuat 2 kolom dengan lebar sama */
    gap: 15px;
    /* Jarak antar filter */
  }

  .sort-container {
    text-align: left;
    /* Memastikan label tetap rata kiri */
  }

  .sort-container select.sorter {
    width: 100%;
    /* Membuat select box mengisi lebar kolomnya */
  }
}

/* ========================================= */
/* ===   GAYA BARU UNTUK FILTER ARTIKEL  === */
/* ========================================= */

/* 1. Sembunyikan label bawaan karena teks sudah ada di dalam select box */
.sort-container label {
  display: none;
}

/* 2. Atur ulang jarak antar elemen */
.filter-container {
  gap: 15px;
}

.sort-container {
  margin: 0;
}

/* 3. Ubah total tampilan select box agar seperti tombol */
select.sorter {
  /* Hapus tampilan default browser */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Ubah warna dan bentuk */
  background-color: #2a2a2a;
  /* Warna latar sedikit lebih terang */
  border: 1px solid var(--border-color);
  border-radius: 20px;
  /* Membuatnya berbentuk pil */
  color: var(--light-text);
  font-weight: bold;
  margin-left: 0;
  /* Hapus margin sisa dari label */

  /* Atur padding agar ada ruang untuk panah kustom */
  padding: 8px 35px 8px 15px;

  /* Ganti panah default dengan panah kustom (SVG) */
  background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e0e0e0'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 24px;
  transition: background-color 0.3s ease;
}

select.sorter:hover {
  background-color: #333;
  /* Efek hover agar lebih interaktif */
}

/* ================================================= */
/* === IMPROVEMENT GAYA HALAMAN ASPIRASI (BARU)  === */
/* ================================================= */

/* Penyesuaian umum untuk pembungkus utama */
body[data-page-id="aspirasi"] .container {
  max-width: 900px;
  /* Sedikit lebih lebar untuk kenyamanan membaca */
}

/* 1. Perbaikan Kartu Aspirasi yang Sudah Masuk */
.aspirasi-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  /* Ganti border kiri menjadi border penuh */
  border-radius: 12px;
  /* Sudut lebih modern */
  padding: 0;
  /* Hapus padding lama untuk struktur baru */
  overflow: hidden;
  /* Pastikan konten tetap di dalam border radius */
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.aspirasi-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.aspirasi-header {
  padding: 20px 25px;
  background-color: rgba(255, 255, 255, 0.03);
  /* Latar header sedikit beda */
  border-bottom: 1px solid var(--border-color);
  flex-wrap: nowrap;
  /* Agar judul dan status tidak turun */
  align-items: center;
}

.aspirasi-header h3 {
  font-size: 1.1em;
  /* Sedikit lebih kecil agar proporsional */
  flex-grow: 1;
  /* Biarkan judul mengambil ruang sisa */
}

.aspirasi-body {
  padding: 25px;
  font-size: 0.95em;
}

.aspirasi-body p {
  margin-bottom: 0;
  white-space: pre-wrap;
  /* Jaga format paragraf dari pengguna */
  word-wrap: break-word;
}

.aspirasi-meta {
  padding: 0 25px 20px 25px;
  gap: 10px 25px;
  /* Jarak vertikal dan horizontal */
  opacity: 0.8;
  /* Buat meta data sedikit lebih subtil */
}

.aspirasi-meta span {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Jarak antara ikon dan teks */
}

/* 2. Gaya Baru untuk Status Aspirasi */
.status-tag {
  font-size: 0.7em;
  padding: 4px 10px;
  text-transform: uppercase;
  /* Teks kapital agar lebih tegas */
  letter-spacing: 0.5px;
}

/* Ganti nama kelas agar lebih jelas (opsional, tapi disarankan) */
.status-baru-masuk {
  background-color: var(--primary-color);
  color: #000;
}

/* Badge untuk aspirasi lama (≥ 1 minggu) — netral, agar tidak terlihat "baru" */
.status-lama {
  background-color: var(--border-color);
  color: var(--light-text);
}

/* 3. Perbaikan Tampilan Form Aspirasi */
.form-aspirasi {
  border-radius: 12px;
  padding: 35px;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.2);
  /* Efek glow saat di-klik */
}

.submit-btn {
  border-radius: 50px;
  /* Tombol berbentuk pil */
  padding: 12px 30px;
  font-size: 0.95em;
}

/* 4. Penyesuaian untuk Intro Filosofi */
.collapsible-container {
  background-color: transparent;
  border: none;
  padding: 0;
  margin-bottom: 40px;
}

.collapsible-title {
  font-size: 1.4em;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

#intro-text-wrapper.collapsed {
  max-height: 100px;
  /* Sedikit lebih pendek */
}

#intro-text-wrapper.collapsed::after {
  background: linear-gradient(to top, var(--dark-bg), transparent);
}

/* ========================================= */
/* ===         GAYA E-COMMERCE BARU      === */
/* ========================================= */

/* Ikon Keranjang Belanja di Header */
#keranjang-belanja i {
  font-size: 1.3em;
  color: var(--light-text);
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

#keranjang-belanja:hover i {
  color: var(--secondary-color);
  /* Warna kuning saat di-hover */
  transform: scale(1.1);
}

/* ========================================= */
/* ===  TOMBOL LOGIN DI POJOK HEADER     === */
/* ========================================= */

/* Dipakai dua elemen kembar: #header-login-btn (desktop, di .social-media) dan
   #header-login-btn-mobile (di .mobile-header-actions) — .social-media memang
   disembunyikan di <=768px, jadi tidak bisa satu elemen saja. */
/* Sengaja kecil & kalem: login itu pintu admin, bukan menu publik. */
.header-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--light-text);
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

.header-login-btn i {
  font-size: 0.85rem;
  color: inherit;
}

.header-login-btn:hover,
.header-login-btn:focus-visible {
  background-color: rgba(0, 170, 255, 0.14);
  border-color: var(--primary-color);
  color: var(--primary-color);
  outline: none;
}

/* .social-media a memaksa font-size 1.3em + scale saat hover, jadi versi
   ber-scope ini yang harus menang. */
.social-media .header-login-btn {
  font-size: 0.78rem;
}

.social-media .header-login-btn:hover {
  color: var(--primary-color);
  transform: none;
}

.social-media .header-login-btn i {
  font-size: 0.85rem;
  color: inherit;
}

/* ========================================= */
/* ===  PERBAIKAN KERANJANG MOBILE       === */
/* ========================================= */

.mobile-header-actions {
  display: flex;
  align-items: center;
}

#keranjang-belanja-mobile i {
  font-size: 1.5em;
  /* Ukuran ikon yang ideal untuk header */
  color: var(--light-text);
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

#keranjang-belanja-mobile:hover i {
  color: var(--secondary-color);
  /* Warna kuning saat disentuh/hover */
  transform: scale(1.1);
}

/* ========================================= */
/* ===     GAYA NOTIFIKASI KERANJANG     === */
/* ========================================= */

.cart-icon-wrapper {
  position: relative;
  /* Kunci untuk positioning notifikasi */
  display: inline-block;
}

.cart-badge {
  position: absolute;
  top: -5px;
  /* Posisi sedikit di atas ikon */
  right: -8px;
  /* Posisi sedikit di kanan ikon */

  background-color: #dc3545;
  /* Warna merah yang mencolok */
  color: white;

  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* Membuatnya menjadi lingkaran */

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 0.7em;
  font-weight: bold;

  border: 2px solid var(--dark-bg);
  /* Memberi sedikit outline */

  /* Animasi saat muncul */
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* Tampilkan notifikasi jika tidak memiliki class .hidden */
.cart-badge:not(.hidden) {
  transform: scale(1);
}

/* Penyesuaian untuk notifikasi di header mobile */
#keranjang-belanja-mobile .cart-badge {
  border-color: #0e0e0e;
  /* Warna latar header mobile */
}

/* ========================================= */
/* ===         GAYA NOTIFIKASI BARU      === */
/* ========================================= */
.notification-banner {
  position: fixed;
  top: 80px;
  /* Muncul di bawah header desktop */
  left: 50%;
  transform: translateX(-50%);
  padding: 15px 25px;
  border-radius: 8px;
  color: #fff;
  z-index: 10002;
  /* Di atas segalanya, termasuk #identity-modal (10001) */
  display: flex;
  align-items: center;
  gap: 15px;
  opacity: 0;
  transform: translate(-50%, -20px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
  font-family: "Poppins", sans-serif;
  font-style: normal;
}

.notification-banner.show {
  opacity: 1;
  transform: translateX(-50%);
}

.notification-banner.success {
  background-color: #28a745;
  /* Hijau untuk sukses */
  box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
}

.notification-banner i {
  font-size: 1.5em;
}

.notification-close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5em;
  margin-left: 20px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.notification-close-btn:hover {
  opacity: 1;
}

/* Penyesuaian untuk mobile */
@media (max-width: 768px) {
  .notification-banner {
    top: calc(var(--mobile-top-header-height) + var(--safe-top));
    width: 90%;
  }
}

/* ======================================================= */
/* === GAYA HEADER & PENCARIAN FINAL (MINIMALIS) === */
/* ======================================================= */

/* --- Header Mobile Utama (Dibuat Ramping & Selalu Tampil) --- */
.mobile-top-header {
  display: block;
  /* Selalu tampil di mobile */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
  /* Glassmorphic — konsisten dengan bottom nav */
  background-color: rgba(8, 8, 14, 0.78);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  padding-top: var(--safe-top);
  height: calc(var(--mobile-top-header-height) + var(--safe-top));
}

/* Gradient border bawah — mirror dari gradient atas bottom nav */
.mobile-top-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 170, 255, 0.3) 20%,
    rgba(0, 170, 255, 0.75) 50%,
    rgba(247, 183, 51, 0.25) 80%,
    transparent 100%
  );
  pointer-events: none;
}

/* Logo image: natural shape + diperjelas */
.mobile-top-header .logo img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: brightness(1.15) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

.mobile-top-header .logo img:hover {
  transform: scale(1.08);
  filter: brightness(1.25) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.mobile-top-header.hidden {
  transform: translateY(-100%);
}

.mobile-header-container .logo-main-text {
  /* Gradient text: putih ke cyan — subtle & elegan */
  background: linear-gradient(135deg, #ffffff 0%, #c0e8ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.1em;
}

.mobile-header-main .logo-main-text {
  font-size: 1.1em;
}

.mobile-header-actions {
  display: flex;
  align-items: center;
  gap: 25px;
}

/* Search icon — circular touch target + hover/tap feedback */
.mobile-header-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition:
    background-color 0.2s ease,
    transform 0.15s ease;
}

.mobile-header-actions a:hover {
  background-color: rgba(0, 170, 255, 0.1);
}

.mobile-header-actions a:active {
  transform: scale(0.88);
  background-color: rgba(0, 170, 255, 0.18);
  transition:
    transform 0.08s ease,
    background-color 0.08s ease;
}

.mobile-header-actions i {
  font-size: 1.4em;
  color: var(--light-text);
  transition: color 0.2s ease;
}

.mobile-header-actions a:hover i {
  color: var(--primary-color);
}

/* .mobile-header-actions a memaksa kotak 38x38 bulat (gaya ikon search lama) dan
   .mobile-header-actions i memaksa ikon 1.4em putih. Tombol login berbentuk pil
   berlabel, jadi harus ditimpa — wajib di bawah blok itu supaya menang urutan. */
.mobile-header-actions .header-login-btn {
  width: auto;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  gap: 5px;
}

.mobile-header-actions .header-login-btn span {
  font-size: 0.68rem;
}

.mobile-header-actions .header-login-btn i,
.mobile-header-actions .header-login-btn:hover i {
  font-size: 0.7rem;
  color: inherit;
}

.mobile-header-actions .header-login-btn:hover {
  background-color: rgba(0, 170, 255, 0.14);
}

.mobile-header-actions .header-login-btn:active {
  transform: scale(0.9);
}

/* --- Panel Pencarian Model Baru (Animasi dari Atas) --- */
#search-panel {
  display: block;
  position: fixed;
  top: calc(var(--mobile-top-header-height) + var(--safe-top));
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #1a1a1a;
  padding: 15px;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(-150%);
  /* Posisi awal jauh di atas */
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  visibility: hidden;
}

#search-panel.active {
  transform: translateY(0);
  visibility: visible;
}

.search-panel-form {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  position: relative;
}

#search-panel-input {
  width: 100%;
  background: var(--dark-bg);
  border: 1px solid var(--border-color);
  border-radius: 50px;
  color: var(--light-text);
  font-size: 1em;
  padding: 10px 20px 10px 45px;
}

#search-panel-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.search-panel-form .search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dark-text);
}

#search-panel-close-btn {
  background: none;
  border: none;
  color: var(--dark-text);
  font-size: 1.5em;
  cursor: pointer;
  padding: 5px;
}

/* --- Logika Tampilan Desktop vs Mobile --- */
@media (min-width: 769px) {
  /* Sembunyikan semua elemen mobile di desktop */
  .mobile-top-header,
  #search-panel {
    display: none;
  }
}

@media (max-width: 768px) {
  body {
    padding-top: calc(var(--mobile-top-header-height) + var(--safe-top));
  }

  /* Sembunyikan modal desktop di mobile */
  #search-modal {
    display: none;
  }
}

/* --- Modal Pencarian (Hanya untuk Desktop) --- */
#search-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 10000;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#search-modal.hidden {
  pointer-events: none;
}

#search-modal:not(.hidden) {
  opacity: 1;
}

.search-modal-content {
  background: linear-gradient(
    145deg,
    rgba(26, 26, 26, 0.95),
    rgba(20, 20, 30, 0.92)
  );
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: 32px 36px;
  border-radius: 18px;
  text-align: center;
  width: 90%;
  max-width: 520px;
  border: 1px solid rgba(0, 170, 255, 0.25);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 40px rgba(0, 170, 255, 0.12);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  transition: transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#search-modal .modal-icon {
  font-size: 3em;
  background: linear-gradient(135deg, #00aaff, #00ffaa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}

#search-modal .modal-close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 1.5em;
  color: #888;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

#search-modal .modal-close-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(90deg);
}

#search-modal:not(.hidden) .search-modal-content {
  transform: translate(-50%, -50%) scale(1);
}

#search-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #2a2a2a;
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 8px 8px;
  z-index: 10001;
  max-height: 300px;
  overflow-y: auto;
  text-align: left;
}

.suggestion-item {
  padding: 12px 20px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  color: var(--light-text);
  text-decoration: none;
  display: block;
  transition: background-color 0.2s ease;
}

.suggestion-item:hover {
  background-color: var(--primary-color);
  color: #000;
}

.suggestion-item .item-title {
  font-weight: bold;
}

.suggestion-item .item-type {
  font-size: 0.8em;
  color: var(--dark-text);
}

.suggestion-item:hover .item-type {
  color: #333;
}

/* === SEARCH UX UPGRADE (input pill, button shine, suggestion slide) === */
#search-input-modal {
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 18px 14px 46px;
  color: var(--light-text);
  font-size: 1.05em;
  caret-color: var(--primary-color);
  transition:
    border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

#search-input-modal:focus {
  outline: none;
  border-color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  background: rgba(0, 0, 0, 0.6);
  box-shadow:
    0 0 0 4px rgba(0, 170, 255, 0.15),
    0 0 24px rgba(0, 170, 255, 0.18);
  transform: translateY(-1px);
}

#search-input-modal::placeholder {
  color: rgba(224, 224, 224, 0.45);
  transition: opacity 0.3s ease;
}

#search-input-modal:focus::placeholder {
  opacity: 0.7;
}

#search-form-modal .search-bar {
  position: relative;
}

#search-form-modal .search-bar > i.fa-search {
  position: absolute;
  left: 16px;
  top: 18px;
  color: var(--primary-color);
  font-size: 1em;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 2;
}

#search-form-modal .search-bar:focus-within > i.fa-search {
  transform: scale(1.18) rotate(-6deg);
}

#search-form-modal button[type="submit"] {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary-color), #0088cc);
  border: none;
  color: #fff;
  padding: 13px 30px;
  font-weight: 600;
  letter-spacing: 0.3px;
  font-size: 0.98em;
  border-radius: 12px;
  cursor: pointer;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
  box-shadow: 0 6px 20px rgba(0, 170, 255, 0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: center;
}

#search-form-modal button[type="submit"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

#search-form-modal button[type="submit"]:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 12px 30px rgba(0, 170, 255, 0.45),
    0 0 30px rgba(247, 183, 51, 0.18);
}

#search-form-modal button[type="submit"]:hover::before {
  transform: translateX(100%);
}

#search-form-modal button[type="submit"]:active {
  transform: translateY(0) scale(0.98);
}

#search-form-modal button[type="submit"] i {
  font-size: 0.95em;
}

/* Suggestion item upgrade (gradient slide instead of solid swap) */
.suggestion-item {
  padding: 12px 38px 12px 20px;
  position: relative;
  transform: translateX(0);
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s ease,
    border-left-color 0.3s ease;
  border-left: 3px solid transparent;
}

.suggestion-item::after {
  content: "→";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  opacity: 0;
  color: var(--primary-color);
  font-weight: 700;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.suggestion-item:hover {
  background: linear-gradient(
    90deg,
    rgba(0, 170, 255, 0.18),
    rgba(0, 170, 255, 0.02) 70%,
    transparent
  );
  color: var(--light-text);
  transform: translateX(4px);
  border-left-color: var(--primary-color);
}

.suggestion-item:hover .item-type {
  color: var(--dark-text);
}

.suggestion-item:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Mobile search panel polish */
#search-panel-input {
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

#search-panel-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.18);
  background: #0a0a0a;
}

#search-panel-close-btn {
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.25s ease;
}

#search-panel-close-btn:hover,
#search-panel-close-btn:focus-visible {
  transform: rotate(90deg);
  color: var(--primary-color);
  outline: none;
}

/* Keyboard shortcut hint */
.search-shortcut-hint {
  margin-top: 6px;
  font-size: 0.72em;
  color: rgba(224, 224, 224, 0.45);
  letter-spacing: 0.4px;
  user-select: none;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.search-shortcut-hint kbd {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.9em;
  color: var(--light-text);
  margin-right: 3px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

/* === GAYA MODAL FEEDBACK KELUAR (BARU) === */
#exit-feedback-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  /* blur mati semua layar — sama kasus dengan #identity-modal: overlay ini
     menumpuk di atas canvas meteor yang repaint tiap frame, biang ngelag
     saat ngetik di textarea #feedback-text. Background sudah pekat (alpha .7). */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  padding: 20px;
  pointer-events: none;
}

#exit-feedback-modal.visible {
  opacity: 1;
  pointer-events: auto;
}

.feedback-modal-content {
  /* Glassmorphic — konsisten dengan bottom nav / mobile-top-header */
  background-color: rgba(8, 8, 14, 0.78);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  padding: 30px 40px;
  border-radius: 12px;
  text-align: center;
  width: 90%;
  max-width: 450px;
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  position: relative;
  transform: scale(0.9);
  transition: transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

#exit-feedback-modal.visible .feedback-modal-content {
  transform: scale(1);
}

.feedback-modal-content h2 {
  font-size: 1.6em;
  margin-bottom: 10px;
  color: var(--light-text);
}

.feedback-modal-content p {
  font-style: normal;
  font-size: 0.95em;
  margin-bottom: 25px;
  color: var(--dark-text);
}

.star-rating {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 2.5em;
  color: #555;
  margin-bottom: 25px;
}

.star-rating .fa-star {
  cursor: pointer;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.star-rating .fa-star:hover,
.star-rating .fa-star.selected {
  color: var(--secondary-color);
  /* Warna kuning */
  transform: scale(1.2);
}

#feedback-form .form-group {
  margin-bottom: 20px;
  text-align: left;
}

#feedback-form textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px;
  background-color: var(--dark-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--light-text);
  font-family: "Poppins", sans-serif;
  resize: vertical;
}

.feedback-modal-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}

/* === GAYA TOMBOL REAKSI (LIKE/DISLIKE) BARU === */
.reaction-buttons {
  display: flex;
  align-items: center;
  gap: 15px;
  font-style: normal;
}

.reaction-btn {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--dark-text);
  border-radius: 20px;
  padding: 5px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8em;
  font-weight: bold;
  transition: all 0.3s ease;
}

.reaction-btn:hover:not(:disabled) {
  background-color: var(--border-color);
  color: var(--light-text);
  transform: translateY(-2px);
}

.reaction-btn i {
  font-size: 1.1em;
}

/* Gaya saat tombol sudah dipilih */
.reaction-btn.liked,
.reaction-btn.liked:hover {
  background-color: #007bff;
  /* Biru */
  border-color: #007bff;
  color: #fff;
}

.reaction-btn.disliked,
.reaction-btn.disliked:hover {
  background-color: #dc3545;
  /* Merah */
  border-color: #dc3545;
  color: #fff;
}

.reaction-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* === TOMBOL BAGIKAN ARTIKEL (salin link) === */
.tombol-bagikan {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--dark-text);
  border-radius: 20px;
  padding: 5px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8em;
  font-weight: bold;
  font-family: inherit;
  transition: all 0.3s ease;
}

.tombol-bagikan:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--light-text);
  transform: translateY(-2px);
}

.tombol-bagikan i {
  font-size: 1.1em;
}

.bagikan-feedback {
  font-size: 0.8em;
  font-weight: bold;
  color: #66fcf1;
  opacity: 0;
  transition: opacity 0.3s ease;
  align-self: center;
}

.bagikan-feedback.is-success {
  opacity: 1;
  color: #66fcf1;
}

.bagikan-feedback.is-error {
  opacity: 1;
  color: #ff6b6b;
}

/* ========================================= */
/* ===    GAYA MODAL IDENTITAS (BARU)    === */
/* ========================================= */
#identity-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10001;
  /* Di atas segalanya */
  display: flex;
  justify-content: center;
  align-items: center;
  /* blur mati semua layar — overlay fullscreen ini menumpuk di atas canvas
     meteor yang repaint tiap frame, jadi biang ngelag saat ngetik nama
     custom di #identity-custom-name. Background sudah pekat (alpha .7). */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  padding: 20px;
  pointer-events: none;
}

#identity-modal.visible {
  opacity: 1;
  pointer-events: auto;
}

.identity-modal-content {
  background-color: var(--card-bg);
  padding: 30px 40px;
  border-radius: 12px;
  text-align: center;
  width: 90%;
  max-width: 450px;
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  position: relative;
  transform: scale(0.9);
  transition: transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

#identity-modal.visible .identity-modal-content {
  transform: scale(1);
}

#identity-modal .modal-close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 1.5em;
  color: #888;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 2;
}

#identity-modal .modal-close-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(90deg);
}

/* Modal lain (#contribution-modal, #search-modal) punya aturan .modal-icon
   sendiri; modal identitas terlewat sehingga ikonnya jatuh ke 14px warisan
   dan nyaris tak terlihat. Ukuran & posisinya disamakan di sini; warnanya
   diambil alih varian .is-chatbot-theme saat modal dipakai gate AI Assistant. */
#identity-modal .modal-icon {
  display: block;
  margin-bottom: 14px;
  font-size: 2.2rem;
  color: var(--primary-color);
}

.identity-modal-content h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
  color: var(--light-text);
}

.identity-modal-content p {
  font-style: normal;
  font-size: 0.9em;
  margin-bottom: 25px;
  color: var(--dark-text);
}

/* Semua pilihan identitas tampil sekaligus sebagai kartu radio — bukan
   dropdown — supaya pengguna sadar bahwa opsinya memang ada. */
.identity-options {
  border: none;
  padding: 0;
  margin: 0 0 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.identity-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background-color: var(--dark-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.identity-option:hover {
  border-color: rgba(0, 170, 255, 0.4);
}

.identity-option input[type="radio"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--primary-color);
  cursor: pointer;
}

.identity-option:has(input[type="radio"]:checked) {
  border-color: var(--primary-color);
  background-color: rgba(0, 170, 255, 0.08);
}

.identity-option:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.identity-option-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.identity-option-title {
  font-size: 0.95em;
  font-weight: 600;
  color: var(--light-text);
  line-height: 1.3;
}

.identity-option-desc {
  font-size: 0.78em;
  color: var(--dark-text);
  line-height: 1.4;
}

#identity-custom-name {
  width: 100%;
  margin-top: 2px;
  padding: 12px 15px;
  background-color: var(--dark-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--light-text);
  font-family: "Poppins", sans-serif;
  font-size: 0.95em;
}

#identity-custom-name:focus {
  outline: none;
  border-color: var(--primary-color);
}

.identity-error {
  margin: 0 0 18px;
  text-align: left;
  font-size: 0.85em;
  font-weight: 600;
  color: #ff6b7a;
}

.identity-error[hidden] {
  display: none;
}

#identity-confirm-btn {
  width: 100%;
}

/* Atribut [hidden] bawaan browser (display:none) KALAH oleh
   .identity-option { display: flex } di atas. Tanpa aturan ini, opsi yang
   "disembunyikan" gate AI Assistant tetap terlihat dan bisa dipilih. */
.identity-option[hidden] {
  display: none;
}

.identity-human-check {
  margin: 0 0 18px;
  text-align: left;
}

.identity-human-check[hidden] {
  display: none;
}

.identity-human-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.86em;
  line-height: 1.45;
  color: var(--light-text);
}

.identity-human-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--primary-color);
  cursor: pointer;
}

/* Honeypot. Sengaja BUKAN display:none/visibility:hidden — bot yang agak
   pintar melewatkan field semacam itu, sedangkan yang mengisi "semua input
   teks" justru ketahuan di sini. Manusia tidak pernah melihat/menjangkaunya. */
.identity-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .identity-option {
    transition: none;
  }
}

/* ========================================= */
/* === INTRO PRELOADER (Typewriter Quote)=== */
/* ========================================= */
#intro-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--dark-bg);
  /* Ensures nothing behind shows through while typing */
  z-index: 100000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  /* Harus sinkron dengan INTRO_FADE_DELAY di js/app-core-v2.js */
  transition: opacity 0.5s ease-in-out;
}

#intro-preloader.hidden {
  opacity: 0;
  pointer-events: none;
}

.intro-content {
  max-width: 80%;
  text-align: left;
  color: #c5c6c7;
  font-family: "Poppins", sans-serif;
  position: relative;
  padding: 40px 20px;
}

.intro-content::before {
  content: "“";
  position: absolute;
  top: -20px;
  left: -20px;
  font-size: 8rem;
  color: rgba(102, 252, 241, 0.15);
  font-family: "Georgia", serif;
  line-height: 1;
  user-select: none;
}

.intro-quote {
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.8;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  font-family: var(--font-article-serif);
}

.intro-author {
  font-size: 1.2rem;
  font-weight: 600;
  color: #66fcf1;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1.2s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  letter-spacing: 2px;
  font-family: var(--font-article-serif);
}

.intro-author.visible {
  opacity: 1;
  transform: translateY(0);
}

.intro-cursor {
  display: inline-block;
  font-weight: bold;
  opacity: 1;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.intro-skip-btn {
  position: absolute;
  bottom: 40px;
  right: 40px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-family: "Poppins", sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 100001;
  display: flex;
  align-items: center;
  gap: 8px;
}

.intro-skip-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateX(5px);
}

@media (max-width: 768px) {
  .intro-content {
    max-width: 90%;
    text-align: center;
    padding: 20px 16px;
  }

  .intro-content::before {
    left: 50%;
    transform: translateX(-50%);
    font-size: 5rem;
    top: -10px;
  }

  .intro-quote {
    font-size: 1.1rem;
    line-height: 1.7;
  }

  .intro-author {
    font-size: 1rem;
  }

  /* Skip button pakai fixed agar tidak keluar visual viewport (100vh != dvh di mobile browser) */
  .intro-skip-btn {
    position: fixed;
    bottom: 24px;
    right: 20px;
  }
}

/* ========================================= */
/* ===          POJOK BACA               === */
/* ========================================= */
.pojok-baca-preview {
  margin: 40px 0 60px 0;
  background: linear-gradient(
    145deg,
    rgba(26, 26, 26, 0.95),
    rgba(18, 18, 26, 0.92)
  );
  border: 1px solid rgba(0, 170, 255, 0.22);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 40px rgba(0, 170, 255, 0.08);
  position: relative;
  isolation: isolate;
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.pojok-baca-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(0, 170, 255, 0.5),
    rgba(247, 183, 51, 0.35) 60%,
    rgba(0, 170, 255, 0.25)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.6;
  pointer-events: none;
  z-index: 2;
}

.pojok-baca-preview:hover {
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 50px rgba(0, 170, 255, 0.18);
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 14, 0.9),
    rgba(20, 20, 28, 0.85)
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 1;
}

.preview-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.preview-header h3 {
  margin: 0;
  font-size: 1.2em;
  font-weight: 700;
  color: var(--light-text);
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.2px;
}

.preview-header h3 i.fa-book-open {
  color: var(--primary-color);
  font-size: 0.95em;
  filter: drop-shadow(0 0 6px rgba(0, 170, 255, 0.45));
}

.preview-subtitle {
  margin: 0;
  font-size: 0.85em;
  color: var(--dark-text);
  line-height: 1.4;
}

.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff4d4d;
  box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.6);
  animation: livePulse 2s ease-out infinite;
  flex-shrink: 0;
}

@keyframes livePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.55);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(255, 77, 77, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 77, 77, 0);
  }
}

.visit-link {
  color: var(--primary-color);
  text-decoration: none;
  font-size: 0.88em;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.25s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
  background: rgba(0, 170, 255, 0.1);
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid rgba(0, 170, 255, 0.18);
}

.visit-link:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--primary-color), #0088cc);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 170, 255, 0.35);
}

.visit-link:active {
  transform: translateY(0);
}

.visit-link i {
  font-size: 0.85em;
  transition: transform 0.3s ease;
}

.visit-link:hover i {
  transform: translate(2px, -2px);
}

.preview-container {
  width: 100%;
  height: clamp(600px, 80vh, 820px);
  background: #f7f8fa;
  position: relative;
  overflow: hidden;
}

.preview-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(135deg, #f7f8fa, #e8eaef);
  color: #4a5060;
  font-size: 0.95em;
  font-weight: 500;
  z-index: 1;
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
}

.preview-container.loaded .preview-loader {
  opacity: 0;
  visibility: hidden;
}

.preview-loader-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(0, 170, 255, 0.15);
  border-top-color: var(--primary-color);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  position: relative;
  z-index: 0;
}

@media (max-width: 768px) {
  .pojok-baca-preview {
    margin: 24px 0 40px 0;
    border-radius: 16px;
  }

  .pojok-baca-preview::before {
    border-radius: 16px;
  }

  .preview-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    padding: 14px 16px;
  }

  .preview-header h3 {
    font-size: 1.1em;
  }

  .preview-subtitle {
    font-size: 0.8em;
  }

  .visit-link {
    align-self: flex-start;
    font-size: 0.82em;
    padding: 8px 14px;
  }

  .preview-container {
    height: clamp(520px, 75vh, 760px);
  }

  .intro-quote {
    font-size: 1.1rem;
  }

  .intro-author {
    font-size: 1rem;
  }
}

/* === REDUCED MOTION GUARD === */
@media (prefers-reduced-motion: reduce) {
  .hero-image,
  .hero-image img,
  .quick-link-item,
  .quick-link-item i,
  .highlight-section .kegiatan-item,
  .highlight-section .kegiatan-foto::before,
  .testimonial-card,
  .hero-button-animated.pulse,
  .hero-identity__caret,
  #search-form-modal button[type="submit"]::before,
  .suggestion-item,
  .suggestion-item::after {
    animation: none !important;
    transition: none !important;
  }

  .quick-link-item:hover,
  .quick-link-item:hover i,
  .quick-link-item.is-touched {
    transform: none !important;
  }

  .animate-on-scroll {
    transition: opacity 0.25s ease !important;
    transform: none !important;
  }
  .animate-on-scroll.visible {
    transform: none !important;
  }

  .reading-progress__tick {
    display: none !important;
  }
}

/* =====================================================
   KARTU UNDUH APLIKASI ANDROID (di footer)
   ===================================================== */
.app-download {
  max-width: 760px;
  margin: 0 auto 30px;
  padding: 0 16px;
  font-size: 1rem; /* reset dari footer 0.8em biar tak kekecilan */
}

.app-dl-inner {
  display: flex;
  gap: 22px;
  align-items: center;
  background: linear-gradient(
    135deg,
    rgba(0, 170, 255, 0.08),
    rgba(247, 183, 51, 0.06)
  );
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 24px;
  text-align: left;
  position: relative;
  overflow: hidden;
}

/* garis tepi gradien tipis */
.app-dl-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--secondary-color)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.55;
  pointer-events: none;
}

.app-dl-icon img {
  width: 88px;
  height: 88px;
  border-radius: 20px;
  object-fit: cover;
  background: var(--card-bg);
  box-shadow: 0 8px 24px rgba(0, 170, 255, 0.25);
}

.app-dl-body {
  flex: 1;
  min-width: 0;
}

.app-dl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--primary-color);
  background: rgba(0, 170, 255, 0.12);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.app-dl-title {
  font-size: 1.3em;
  margin: 0 0 6px;
  color: var(--light-text);
}

.app-dl-desc {
  font-size: 0.9em;
  line-height: 1.55;
  color: var(--light-text);
  opacity: 0.85;
  margin: 0 0 12px;
}

.app-dl-specs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 16px;
}

.app-dl-specs li {
  font-size: 0.78em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--light-text);
  padding: 5px 10px;
  border-radius: 8px;
}

.app-dl-specs li i {
  color: var(--secondary-color);
}

.app-dl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.app-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--primary-color), #0088cc);
  color: #fff;
  font-weight: 700;
  font-size: 0.95em;
  padding: 12px 22px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 170, 255, 0.35);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.app-dl-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 170, 255, 0.5);
}

.app-dl-btn i {
  font-size: 1.1em;
}

.app-dl-help {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--light-text);
  font-size: 0.85em;
  padding: 11px 16px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.app-dl-help:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.app-install-help {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.35s ease,
    margin-top 0.35s ease;
  margin-top: 0;
}

.app-install-help.open {
  max-height: 340px;
  margin-top: 16px;
}

.app-install-help ol {
  margin: 0;
  padding-left: 20px;
  font-size: 0.85em;
  line-height: 1.7;
  color: var(--light-text);
}

.app-install-help code {
  background: var(--card-bg);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--secondary-color);
}

.app-install-note {
  font-size: 0.8em;
  color: var(--light-text);
  opacity: 0.78;
  margin: 10px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

@media (max-width: 600px) {
  .app-dl-inner {
    flex-direction: column;
    text-align: center;
    padding: 22px 18px;
  }
  .app-dl-specs,
  .app-dl-actions {
    justify-content: center;
  }
  .app-dl-badge {
    margin-left: auto;
    margin-right: auto;
  }
  .app-install-help ol {
    text-align: left;
  }
}

/* =====================================================
   FOOTER SPOTIFY EMBED
   ===================================================== */
.footer-spotify-shell {
  max-width: 980px;
  margin: 0 auto 28px;
  padding: 0 16px;
  font-size: 1rem;
}

.footer-spotify-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 24px;
  align-items: center;
  text-align: left;
  padding: 24px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(
      circle at top right,
      rgba(29, 185, 84, 0.16),
      transparent 28%
    ),
    linear-gradient(145deg, rgba(20, 20, 20, 0.96), rgba(12, 12, 12, 0.92));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  position: relative;
}

.footer-spotify-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(29, 185, 84, 0.55),
    rgba(0, 170, 255, 0.3),
    rgba(247, 183, 51, 0.28)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.footer-spotify-copy,
.footer-spotify-player {
  position: relative;
  z-index: 1;
}

.footer-spotify-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-spotify-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(29, 185, 84, 0.12);
  color: #1ed760;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-spotify-title {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.2;
  color: #fff;
}

.footer-spotify-desc {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
  font-size: 0.96em;
}

.footer-spotify-album {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-spotify-thumb {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.footer-spotify-album-copy {
  min-width: 0;
}

.footer-spotify-label {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.74em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.footer-spotify-album-title {
  display: block;
  color: #fff;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.footer-spotify-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.footer-spotify-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1db954, #169c46);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(29, 185, 84, 0.24);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.footer-spotify-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(29, 185, 84, 0.32);
}

.footer-spotify-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.8em;
  line-height: 1.65;
}

.footer-spotify-note a {
  color: #7edbff;
  text-decoration: none;
}

.footer-spotify-note a:hover,
.footer-meta a:hover {
  color: var(--primary-color);
}

.footer-spotify-player {
  min-width: 0;
}

.footer-spotify-player iframe {
  width: 100%;
  min-height: 352px;
  border: 0;
  border-radius: 18px;
  background: #121212;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
}

.footer-meta {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.8;
}

.footer-meta-separator {
  display: inline-block;
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.28);
}

.footer-meta a {
  color: #7edbff;
  text-decoration: none;
}

@media (max-width: 820px) {
  .footer-spotify-card {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .footer-spotify-player iframe {
    min-height: 332px;
  }
}

@media (max-width: 560px) {
  .footer-spotify-shell {
    margin-bottom: 24px;
  }

  .footer-spotify-card {
    padding: 18px;
    border-radius: 18px;
  }

  .footer-spotify-album {
    align-items: flex-start;
  }

  .footer-spotify-thumb {
    width: 58px;
    height: 58px;
    border-radius: 14px;
  }

  .footer-spotify-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .footer-spotify-btn {
    justify-content: center;
  }

  .footer-spotify-player iframe {
    min-height: 300px;
  }

  .footer-meta-separator {
    display: none;
  }
}

/* =====================================================
   HALAMAN PRIVASI
   ===================================================== */
.policy-page {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.policy-hero {
  text-align: left;
  padding: 6px 0 4px;
}

.policy-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 170, 255, 0.1);
  color: var(--primary-color);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.policy-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 4vw, 3rem);
}

.policy-hero p {
  max-width: 760px;
  color: var(--light-text);
  opacity: 0.84;
  line-height: 1.8;
}

.policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.policy-card {
  background: linear-gradient(
    145deg,
    rgba(26, 26, 26, 0.96),
    rgba(12, 12, 12, 0.94)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 24px;
  text-align: left;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

.policy-card h2 {
  margin: 0 0 12px;
  font-size: 1.2em;
}

.policy-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.75;
}

.policy-list {
  margin: 14px 0 0;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.75;
}

.policy-list li + li {
  margin-top: 8px;
}

.policy-inline-link {
  color: #7edbff;
  text-decoration: none;
}

.policy-inline-link:hover {
  color: var(--primary-color);
}

.policy-updated {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.82em;
}

@media (max-width: 820px) {
  .policy-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================= */
/* === PENYESUAIAN TOMBOL SEARCH UTAMA === */
/* ========================================= */

#search-trigger-desktop,
#search-trigger-mobile {
  display: flex !important;
  align-items: center;
  color: var(--light-text);
  transition:
    color 0.3s ease,
    transform 0.3s ease;
  margin-left: auto;
  text-decoration: none;
}

#search-trigger-desktop:hover,
#search-trigger-mobile:hover {
  color: var(--primary-color, #00aaff) !important;
  transform: scale(1.1) !important;
}

#search-trigger-desktop i,
#search-trigger-mobile i {
  font-size: 1.3em;
}

@media (max-width: 768px) {
  #search-trigger-mobile {
    margin-right: 5px; /* Menggeser sedikit agar tidak terlalu mepet ke ujung layar di mobile */
  }
}

/* ========================================= */
/* ===   INDIKATOR PROGRESS BACA (SCROLL) === */
/* ========================================= */
/* .reading-progress sekarang jadi "rel" transparan selebar layar, dan yang
   tumbuh adalah .reading-progress__bar di dalamnya lewat transform: scaleX().
   Dulu yang dianimasikan adalah `width` — properti layout, jadi tiap frame
   scroll memicu relayout. scaleX cuma jalan di compositor.
   Efek samping yang ikut beres: .reading-progress__tick pakai `left: X%`,
   yang dulu dihitung terhadap lebar bar yang ikut berubah, jadi titiknya
   ikut bergeser. Sekarang titik nempel di rel full-width, posisinya tetap. */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 10010;
  pointer-events: none;
  background: transparent;
}

.reading-progress__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--primary-color), #00ffff);
  transition: transform 0.15s ease-out;
  box-shadow: 0 0 8px var(--primary-color);
}

@media (prefers-reduced-motion: reduce) {
  .reading-progress__bar {
    transition: none;
  }
}

/* ========================================= */
/* === TITIK PROGRES BACA (SCROLL JOURNEY) — HOMEPAGE === */
/* ========================================= */
/* .reading-progress di atas sudah position:fixed, jadi sudah jadi containing
   block yang valid untuk .reading-progress__tick (position:absolute). */
.reading-progress__tick {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
}

.reading-progress__tick.is-lit {
  background: var(--secondary-color);
  box-shadow: 0 0 6px var(--secondary-color);
}

/* =========================================================================
   === JALUR MOBILE-LITE — HARUS TETAP DI PALING BAWAH FILE ===
   =========================================================================
   Sebelum ini, HP justru merender CSS yang LEBIH mahal daripada desktop:
   dua bar fixed selebar layar dengan backdrop-filter blur(24px) saturate(180%)
   (top header + bottom nav) menumpuk di atas canvas meteor yang repaint tiap
   frame — tiap bar harus meng-sample ulang backdrop-nya setiap frame. Ditambah
   ~10 backdrop-filter lain di kartu yang berulang, plus animasi infinite yang
   memaint properti non-compositable (filter/box-shadow/background-position).

   Di sini semuanya dimatikan khusus layar <=768px dan diganti background solid
   semi-transparan. Karena temanya sudah hitam pekat (--dark-bg: #000000),
   perbedaan visualnya nyaris tak terlihat, tapi biaya GPU per frame hilang.
   Desktop TIDAK disentuh sama sekali.

   Blok ini sengaja ditaruh paling akhir supaya menang lewat source order
   dengan specificity yang sama — tanpa perlu !important.
   ========================================================================= */
@media (max-width: 768px) {
  /* --- Dua bar fixed selebar layar: biang jank scroll --- */
  header#main-header,
  .mobile-top-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: rgba(8, 8, 14, 0.94);
  }

  /* Ikon nav aktif: drop-shadow = blur pass, dan ia ditransisikan */
  header nav ul li.active a i {
    filter: none;
  }

  .mobile-top-header .logo img {
    filter: none;
  }


  /* --- Overlay/modal fullscreen: blur di atas seluruh konten --- */
  #welcome-overlay,
  .detail-modal-overlay,
  #contribution-modal,
  #exit-feedback-modal,
  #identity-modal {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .feedback-modal-content {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: rgba(8, 8, 14, 0.96);
  }

  /* --- Animasi infinite yang memaint properti non-compositable --- */
  /* .hero-image: heroLogoGlow menganimasikan filter: drop-shadow() = elemen
     di-blur ULANG tiap frame, selamanya, dan ini KHUSUS mobile (desktop tidak
     punya animasi ini). Yang dimatikan cuma animasinya — drop-shadow statis
     dari aturan dasar tetap dipakai supaya glow logonya tidak hilang: filter
     statis cuma dipaint sekali, bukan tiap frame. */
  .hero-image {
    animation: none;
    will-change: auto;
  }

  /* box-shadow spread yang dianimasikan = repaint tiap frame, dan
     .click-hint-animated dirender satu per album di galeri. */
  .click-hint-animated,
  .live-dot {
    animation: none;
  }

  /* background-position pada gradient 200% = repaint strip tiap frame */
  .visi::before,
  .misi::before {
    animation: none;
  }

  /* Loop 12 detik yang menahan layer hidup permanen */
  #logo-container {
    animation: none;
  }
}