/* ==========================================================================
   Radio Kristen - Web Radio
   Design system: dark-first, responsive, tanpa framework eksternal.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Latar tidak hitam pekat: birunya yang gelap, tapi tetap ada
   * ruang supaya kartu tidak "tempel" dan bayangan tidak keras. */
  --bg:            #0e1322;
  --bg-soft:       #161d2f;
  --surface:       #1d2439;
  --surface-2:     #252e46;
  --surface-3:     #2f3954;
  --border:        #3a4667;
  --border-soft:   #36415f;

  --text:          #e9edf8;
  --text-muted:    #a4aecb;
  --text-dim:      #8b97ba;

  --primary:       #5b6cff;
  --primary-soft:  #8b98ff;
  --primary-dim:   rgba(91, 108, 255, 0.16);
  --primary-player:#5fa7fa;
  --primary-player1: #504f4d;
  --accent:        #22d3a7;
  --accent-dim:    rgba(34, 211, 167, 0.14);
  --danger:        #f2545b;
  --live:          #f2545b;

  --radius-sm:     8px;
  --radius:        14px;
  --radius-lg:     20px;
  --radius-pill:   999px;

  /* Bayangan diredam: cukup memisahkan lapisan, tidak sampai hitam
   * pekat yang bikin halaman terasa berat. */
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow:        0 8px 22px rgba(0, 0, 0, 0.26);
  --shadow-lg:     0 18px 44px rgba(0, 0, 0, 0.32);

  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --header-h:      64px;
  --player-h:      76px;
  --wrap:          1280px;

  --transition:    180ms cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="light"] {
  /* Latar halaman diberi warna abu-abu kebiruan, bukan putih murni.
   * Kartu putih di atasnya jadi terlihat batasannya tanpa harus
   * mengandalkan border tipis, dan halaman tidak "menyilaukan". */
  --bg:            #e8ecf4;
  --bg-soft:       #f2f5fb;
  --surface:       #ffffff;
  --surface-2:     #e7edf7;
  --surface-3:     #dbe2ef;
  --border:        #a9b8d2;
  --border-soft:   #bcc9de;

  --text:          #1a2138;
  --text-muted:    #5b6684;
  --text-dim:      #5e6885;

  --primary-dim:   rgba(91, 108, 255, 0.12);
  --accent-dim:    rgba(34, 211, 167, 0.12);
  /* #8b98ff hanya mencapai 2.2:1 di atas putih, padahal nilai ini dipakai
   * sebagai warna teks pada .section__link, .list-note a, .nav__link aktif,
   * dan status player. Di lighten menjadi #4f5bd5 (5.5:1 di atas
   * surface, 4.7:1 di atas bg) supaya tetap terbaca. */
  --primary-soft:  #4f5bd5;

  --shadow-sm:     0 1px 2px rgba(19, 28, 63, 0.06);
  --shadow:        0 6px 18px rgba(19, 28, 63, 0.08);
  --shadow-lg:     0 16px 40px rgba(19, 28, 63, 0.11);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* Atribut [hidden] harus menang atas display dari komponen (mis. .cat yang
 * memakai display:flex). Tanpa aturan ini, elemen yang disembunyikan lewat
 * JavaScript tetap terlihat. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(91, 108, 255, 0.20), transparent 60%),
    radial-gradient(760px 460px at 92% 4%, rgba(34, 211, 167, 0.13), transparent 62%);
  pointer-events: none;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; }

:focus-visible {
  outline: 2px solid var(--primary-soft);
  outline-offset: 2px;
  border-radius: 4px;
}

.icon { display: block; fill: currentColor; flex: none; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

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

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-sm);
  transition: top var(--transition);
}
.skip-link:focus { top: 12px; }

/* Spasi bawah untuk player fixed */
.page { padding-bottom: calc(var(--player-h) + 40px); }

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.03em;
  flex: none;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--primary), var(--accent));
  color: #fff;
  box-shadow: 0 4px 14px rgba(91, 108, 255, 0.4);
}
.brand__mark svg { width: 20px; height: 20px; }
.brand__text small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

.nav__link {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.nav__link:hover { background: var(--surface-2); color: var(--text); }
.nav__link.is-active { background: var(--primary-dim); color: var(--primary-soft); }

/* Lencana jumlah favorit */
.badge-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 2px;
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
  background: var(--live);
  border-radius: var(--radius-pill);
  vertical-align: 1px;
}
.badge-count[hidden] { display: none; }

.header__spacer { flex: 1 1 auto; }

/* Pencarian */
.search {
  position: relative;
  flex: 0 1 340px;
  min-width: 0;
}
.search__input {
  width: 100%;
  height: 40px;
  padding: 0 40px 0 38px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition), background var(--transition);
}
.search__input::placeholder { color: var(--text-dim); }
.search__input:focus {
  border-color: var(--primary);
  background: var(--surface);
  outline: none;
}
.search__icon {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  pointer-events: none;
}
.search__clear {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  display: none;
  padding: 4px;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--text-dim);
}
.search__clear:hover { color: var(--text); background: var(--surface-3); }
.search.has-value .search__clear { display: block; }

/* Saran pencarian */
.search__suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  z-index: 95;
  display: none;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
/* Keadaan "terbuka" dimiliki oleh kotak saran itu sendiri (class is-open
 * dipasang oleh initSearch pada #search-suggest). */
.search__suggest.is-open { display: block; }

.suggest__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  text-align: left;
  transition: background var(--transition);
}
.suggest__item:hover,
.suggest__item.is-active { background: var(--surface-2); }
.suggest__item img {
  width: 36px; height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
  background: var(--surface-3);
}
.suggest__name {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggest__meta { font-size: 11.5px; color: var(--text-dim); }
.suggest__empty { padding: 14px; text-align: center; color: var(--text-dim); font-size: 13px; }

/* Tombol utilitas */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--border); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn--primary {
  background: var(--primary-player);
  border-color: var(--primary-player1);
  color: #fff;
}
.icon-btn--primary:hover { background: var(--primary-soft); border-color: var(--primary-soft); color: #fff; }
.icon-btn--ghost { background: transparent; }

.header__tools { display: flex; align-items: center; gap: 8px; flex: none; }

/* Tombol pencarian ringkas hanya untuk mode navigasi sempit. Tanpa aturan
 * dasar ini tombol ikut tampil di lebar desktop bersamaan dengan kolom
 * pencarian, sehingga .header__tools meluber melewati batas viewport. */
.header__search-mobile { display: none; }

.nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 44px 0 34px;
  border-bottom: 1px solid var(--border-soft);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 36px;
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 8px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(34, 211, 167, 0.25);
  border-radius: var(--radius-pill);
}

.hero__title {
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.1;
  margin-bottom: 14px;
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--primary-soft), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__text {
  max-width: 56ch;
  margin: 0 0 22px;
  color: var(--text-muted);
  font-size: 16px;
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: 24px;
}
.hero__stat strong {
  display: block;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.hero__stat span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* Kartu stasiun utama */
.now-playing {
  position: relative;
  padding: 22px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.now-playing__label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.now-playing__art {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--surface-3);
  box-shadow: var(--shadow);
}
.now-playing__name {
  margin: 16px 0 4px;
  font-size: 19px;
}
.now-playing__meta {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.now-playing__controls { display: flex; gap: 10px; }

/* --------------------------------------------------------------------------
   5. Tombol
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: linear-gradient(135deg, var(--primary), #7b6cff);
  color: #fff;
  box-shadow: 0 6px 18px rgba(91, 108, 255, 0.35);
}
.btn--primary:hover { box-shadow: 0 8px 24px rgba(91, 108, 255, 0.5); }

.btn--ghost {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
.btn--ghost:hover { background: var(--surface-3); border-color: var(--primary); }

.btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn[disabled] { opacity: 0.55; pointer-events: none; }

/* --------------------------------------------------------------------------
   6. Section & heading
   -------------------------------------------------------------------------- */

.section { padding: 40px 0 8px; }

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.section__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
}
.section__title svg { color: var(--primary); }
.section__sub {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--text-muted);
}
.section__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--primary-soft);
}
.section__link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   7. Kartu stasiun
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 16px;
}

.card-station {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.card-station:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: var(--shadow);
}
.card-station.is-playing {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow);
}

.card-station__media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  background: var(--surface-3);
  overflow: hidden;
}
.card-station__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.card-station:hover .card-station__media img { transform: scale(1.06); }

.card-station__badge {
  position: absolute;
  top: 8px;
  padding: 2px 7px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  border-radius: 5px;
  background: rgba(7, 11, 23, 0.72);
  color: #fff;
  backdrop-filter: blur(4px);
}
.badge-live { left: 8px; display: inline-flex; align-items: center; gap: 4px; color: #fff; }
.badge-live::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--live);
  animation: pulse 2s ease-in-out infinite;
}
.badge-hls { right: 8px; color: var(--accent); }

.card-station__play {
  position: absolute;
  left: 50%; top: 50%;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  /* Kursor di dalam card (belum di tombol): abu-abu transparan kaca. */
  background: rgba(120, 128, 150, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity var(--transition), transform var(--transition), background var(--transition);
}
.card-station:hover .card-station__play,
.card-station.is-playing .card-station__play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
/* Kursor tepat di tombol play: hijau. */
.card-station__play:hover { background: var(--accent); color: #05221a; }
.card-station.is-playing .card-station__play { background: var(--accent); color: #05221a; }

.card-station__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 5px;
  padding: 11px 12px 12px;
}
.card-station__title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-station__title a:hover { color: var(--primary-soft); }
.card-station__meta { margin: 0; font-size: 11.5px; color: var(--text-dim); }
.card-station__cat {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-station__desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-station__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}
.card-station__views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim);
}
.card-station__actions { display: flex; gap: 6px; }
.card-station__actions .icon-btn { width: 30px; height: 30px; }
.card-station__actions .icon-btn--primary { width: 32px; height: 32px; }

.icon-btn.is-favorite { color: var(--live); }
.icon-btn.is-favorite .icon { fill: currentColor; }

/* Tombol favorit berteks di halaman detail */
.btn.is-favorite { color: var(--live); border-color: var(--live); }
.btn.is-favorite .icon { fill: currentColor; }

/* Varian baris (desktop) */
.card-station--row { flex-direction: row; align-items: stretch; }
.card-station--row .card-station__media {
  flex: none;
  width: 104px;
  aspect-ratio: auto;
}
.card-station--row .card-station__body { padding: 12px 14px; gap: 4px; }
.card-station--row .card-station__title { font-size: 14.5px; -webkit-line-clamp: 1; line-clamp: 1; }

/* --------------------------------------------------------------------------
   Indikator navigasi (soft navigation)
   -------------------------------------------------------------------------- */

/* Pindah halaman tanpa memuat ulang dokumen, sehingga streaming tidak terputus */
.route-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  background: var(--primary-soft);
  transition: opacity 0.22s ease;
}
.route-bar.is-active { opacity: 1; }
.route-bar span {
  display: block;
  height: 100%;
  width: 34%;
  background: var(--primary);
  transform-origin: 0 50%;
  animation: route-slide 1.05s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes route-slide {
  from { transform: translateX(-110%) scaleX(0.55); }
  to   { transform: translateX(420%) scaleX(0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .route-bar span { animation: none; width: 100%; transform: none; }
}

/* Konten diredupkan sebentar saat halaman ditukar */
.is-routing main { opacity: 0.55; transition: opacity 0.12s ease; }
main { transition: opacity 0.18s ease; }

/* --------------------------------------------------------------------------
   8. Kategori
   -------------------------------------------------------------------------- */

.cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 12px;
}

.cat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 16px 10px 13px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  text-align: center;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.cat:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  background: var(--surface-2);
  box-shadow: var(--shadow);
}
.cat img {
  width: 46px; height: 46px;
  object-fit: cover;
  border-radius: 11px;
  background: var(--surface-3);
  box-shadow: var(--shadow-sm);
}
.cat__name {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat__count { font-size: 11px; color: var(--text-dim); }

/* Nama negara versi bahasa Indonesia. Ditampilkan di sini supaya hasil
 * pencarian lewat nama negara ("jerman") terlihat alasannya, bukan
 * sekadar nama kategori berbahasa Inggris. */
.cat__country {
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat__country .cat__hit { color: var(--text); }

.cat--flag img { border-radius: 50%; }
.cat--flag { padding-top: 14px; }

/* Bendera negara dari data API. Bentuknya dipertahankan sebagai persegi
 * panjang, bukan lingkaran, supaya tidak terpotong. */
.cat__flag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 30px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface-3);
  box-shadow: var(--shadow-sm);
}
.cat__flag .flag {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Direktorium kategori: seluruh daftar sekaligus, urutan jumlah stasiun */
.cats--full {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}
.cats--full .cat { padding: 14px 10px 11px; }
.cats--full .cat img { width: 42px; height: 42px; border-radius: 50%; }
.cats--full .cat__flag { width: 40px; height: 27px; }
.cats--full .cat__flag .flag { width: 100%; height: 100%; border-radius: 0; }
.cats--full .cat__name { -webkit-line-clamp: 1; line-clamp: 1; }

/* --------------------------------------------------------------------------
   9. Halaman / toolbar
   -------------------------------------------------------------------------- */

.page-head {
  padding: 32px 0 8px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 24px;
}
.page-head__title { font-size: clamp(22px, 3.2vw, 32px); }
.page-head__sub { margin: 8px 0 0; color: var(--text-muted); font-size: 14.5px; }
.page-head__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 16px;
}
.page-head__stats .stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
}
.page-head__stats .stat strong {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.crumbs a { color: var(--text-muted); font-weight: 600; }
.crumbs a:hover { color: var(--primary-soft); }
.crumbs span[aria-hidden] { opacity: 0.5; }
.crumbs [aria-current] { color: var(--text-muted); }
.page-head__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.page-head__back:hover { color: var(--primary-soft); }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.toolbar__count {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-dim);
}

/* Filter nama kategori / pencarian lokal */
.toolbar__filter {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  max-width: 420px;
  height: 40px;
  padding: 0 12px;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.toolbar__filter:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.toolbar__filter-icon {
  display: grid;
  place-items: center;
  color: var(--text-dim);
  flex: none;
}
.toolbar__filter-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  outline: none;
}
.toolbar__filter-input::placeholder { color: var(--text-dim); }
.toolbar__filter-input::-webkit-search-cancel-button { display: none; }
.toolbar__filter-clear {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--text-dim);
  background: transparent;
  border: 0;
  border-radius: 50%;
}
.toolbar__filter-clear:hover {
  color: var(--text);
  background: var(--surface-2);
}
.cat-hint {
  margin: 16px 0 0;
  color: var(--text-dim);
  font-size: 12.5px;
}
.cat-hint kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-bottom-width: 2px;
  border-radius: 6px;
  font-size: 11.5px;
  text-align: center;
}
.cat__hit {
  padding: 0 1px;
  color: inherit;
  background: var(--primary-dim);
  border-radius: 4px;
}
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.chip {
  flex: none;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.chip:hover { background: var(--surface-3); color: var(--text); }
.chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* --------------------------------------------------------------------------
   10. Paginasi & load more
   -------------------------------------------------------------------------- */

.load-more {
  display: flex;
  justify-content: center;
  padding: 28px 0 8px;
}

.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 28px 0 8px;
}
.pagination a,
.pagination span {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.pagination a:hover { background: var(--surface-3); color: var(--text); }
.pagination .is-current {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.pagination .is-disabled { opacity: 0.4; pointer-events: none; }
.pagination .gap,
.pagination__gap {
  background: none;
  border: 0;
  color: var(--text-dim);
  min-width: 26px;
  padding: 0 4px;
}
.pagination__arrow { font-size: 16px !important; }

/* Catatan kecil di bawah daftar (mis. batas jumlah data dari API) */
.list-note {
  max-width: 62ch;
  margin: 20px auto 0;
  padding: 13px 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  text-align: center;
}
.list-note a { color: var(--primary-soft); font-weight: 600; }
.list-note a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   11. Detail stasiun
   -------------------------------------------------------------------------- */

.station {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 30px;
  padding: 32px 0 8px;
}

/* align-self:start: tinggi kolom = tinggi gambar. Tanpa ini kolom ikut
 * meregang setinggi kolom teks (grid stretch) sehingga overlay "bottom: 0"
 * jatuh di bawah gambar, bukan di atas gambar. */
.station__art-col { position: relative; align-self: start; }
.station__art {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.station__badges {
  position: absolute;
  top: 12px; left: 12px;
  display: flex;
  gap: 6px;
}

/* Grafik audio di atas gambar radio yang sedang diputar (pola
 * radio-player__playing-overlay). Muncul hanya saat state playing. */
.station__eq {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding: 36px 12px 12px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: linear-gradient(to top, rgba(5, 8, 18, 0.78), transparent);
  pointer-events: none;
}
.station__art-col.is-playing .station__eq { display: flex; }
.station__eq span {
  width: 4px;
  background: var(--accent);
  border-radius: 2px;
  animation: eq 900ms ease-in-out infinite;
}
.station__eq span:nth-child(1) { height: 12px; animation-delay: -100ms; }
.station__eq span:nth-child(2) { height: 22px; animation-delay: -500ms; }
.station__eq span:nth-child(3) { height: 16px; animation-delay: -300ms; }
.station__eq span:nth-child(4) { height: 26px; animation-delay: -700ms; }
.station__eq span:nth-child(5) { height: 20px; animation-delay: -200ms; }
.station__eq span:nth-child(6) { height: 26px; animation-delay: -600ms; }
.station__eq span:nth-child(7) { height: 14px; animation-delay: -400ms; }
.station__eq span:nth-child(8) { height: 22px; animation-delay: -800ms; }
.station__eq span:nth-child(9) { height: 16px; animation-delay: -100ms; }

.station__name { font-size: clamp(22px, 3vw, 32px); margin-bottom: 8px; }
.station__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
}
.tag a:hover { color: var(--primary-soft); }
.tag--live { color: var(--live); background: rgba(242, 84, 91, 0.12); border-color: rgba(242, 84, 91, 0.3); }

.station__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.stat-card {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.stat-card strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
}
.stat-card span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.station__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }

.station__block { margin-bottom: 24px; }
.station__block h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  margin-bottom: 10px;
}
.station__block p { margin: 0; color: var(--text-muted); }

.stream-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  word-break: break-all;
  color: var(--text-muted);
}
.stream-box__label {
  flex: none;
  padding: 3px 8px;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: var(--accent-dim);
  border-radius: 5px;
}

/* --------------------------------------------------------------------------
   12. Empty / skeleton / alert
   -------------------------------------------------------------------------- */

.empty {
  padding: 60px 20px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}
.empty__icon {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-dim);
}
.empty h2 { font-size: 18px; margin-bottom: 8px; }
.empty p { margin: 0 0 18px; color: var(--text-muted); font-size: 14px; }

/* Kondisi kosong yang muncul dan hilang saat difilter (tanpa reload) */
.empty--inline {
  margin-top: 8px;
  padding: 44px 20px;
}
.empty--inline[hidden] { display: none; }

.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  border-radius: var(--radius);
  background: rgba(242, 84, 91, 0.1);
  border: 1px solid rgba(242, 84, 91, 0.28);
  color: #ffb4b7;
}
html[data-theme="light"] .alert { color: #b3242b; }
.alert svg { flex: none; margin-top: 2px; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton--line { height: 12px; border-radius: 6px; margin-bottom: 8px; }
.skeleton--short { width: 55%; }

@keyframes shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}

/* --------------------------------------------------------------------------
   13. Player fixed
   -------------------------------------------------------------------------- */

.player {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  height: var(--player-h);
  background: color-mix(in srgb, var(--bg-soft) 94%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 34px rgba(6, 10, 24, 0.32);
  transform: translateY(110%);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.player.is-visible { transform: translateY(0); }

/* Garis tipis di tepi atas. Membuat player terbaca sebagai lapisan
 * sendiri yang menempel di bawah, terutama pada mode terang yang
 * warnanya hampir sama putih dengan isi halaman. */
.player::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary) 32%, var(--accent) 68%, transparent);
  opacity: 0.3;
  pointer-events: none;
}
html[data-theme="light"] .player { box-shadow: 0 -10px 30px rgba(19, 28, 63, 0.15); }

.player__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
}

.player__art {
  position: relative;
  width: 50px; height: 50px;
  flex: none;
  border-radius: 11px;
  overflow: hidden;
  background: var(--surface-3);
}
.player__art img { width: 100%; height: 100%; object-fit: cover; }

/* Artwork menjadi tautan ke detail stasiun setelah stasiun dipilih. */
.player__art[href] { transition: transform var(--transition), box-shadow var(--transition); }
.player__art[href]:hover { transform: scale(1.05); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }

.player__eq {
  position: absolute;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding-bottom: 12px;
  /* Ikut warna tema: warna gelap yang dikunci membuat kotak hitam di
   * atas artwork saat mode terang. */
  background: color-mix(in srgb, var(--bg) 62%, transparent);
}
.player.is-playing .player__eq { display: flex; }
.player__eq span {
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  animation: eq 900ms ease-in-out infinite;
}
.player__eq span:nth-child(1) { height: 40%; animation-delay: -200ms; }
.player__eq span:nth-child(2) { height: 70%; animation-delay: -500ms; }
.player__eq span:nth-child(3) { height: 50%; animation-delay: -300ms; }
.player__eq span:nth-child(4) { height: 85%; animation-delay: -600ms; }

@keyframes eq {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1); }
}

.player__meta { min-width: 0; width: 190px; flex: none; }
.player__name {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player__sub {
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player__center {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.player__controls { display: flex; align-items: center; gap: 8px; }

.player__btn {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--text-muted);
  transition: color var(--transition), background var(--transition);
}
.player__btn:hover { color: var(--text); background: var(--surface-2); }

/* Tombol sekunder dibuat lebih redup supaya tombol utama jadi satu
 * titik fokus yang jelas. */
.player__btn--side { color: var(--text-dim); }
.player__btn--side:hover { color: var(--text); }

.player__btn--main {
  width: 46px; height: 46px;
  background: linear-gradient(140deg, #40e8ba, var(--accent) 52%, #12b48f);
  color: #05221a;
  box-shadow: 0 6px 18px rgba(34, 211, 167, 0.42);
}
.player__btn--main:hover {
  background: linear-gradient(140deg, #4deec3, #26d9ae 52%, #14c49b);
  color: #05221a;
  filter: brightness(1.06);
}
.player__btn[disabled] { opacity: 0.4; pointer-events: none; }

/* Progress / status */
.player__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(520px, 100%);
}
.player__status {
  flex: none;
  min-width: 52px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: right;
}
.player__status.is-live { color: var(--live); }
.player__status.is-loading { color: var(--primary-soft); }
.player__status.is-error { color: var(--danger); }

/* --text-dim, --primary-soft, dan --live terlalu pucat di atas putih.
 * Teks status dan subjudul player memakai warna yang lebih pekat khusus
 * mode terang supaya tetap terbaca (minimal rasio 4.5:1). */
html[data-theme="light"] .player__status,
html[data-theme="light"] .player__sub { color: var(--text-muted); }
html[data-theme="light"] .player__status.is-loading { color: #4a56d8; }
html[data-theme="light"] .player__status.is-live { color: #c22430; }
html[data-theme="light"] .player__status.is-error { color: #c2242b; }

.player__track {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
}
.player__progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 2px;
  transition: width 240ms linear, opacity var(--transition);
}

/* Radio live tidak punya posisi playback yang bisa digeser, jadi tidak
 * ada progress yang perlu bergerak. Garis biru yang berjalan sebelumnya
 * membuat arah mata terus dikejar, jadi diganti menjadi garis statis
 * dengan opasitas lebih rendah. */
.player__track.is-indeterminate .player__progress {
  width: 100% !important;
  animation: none;
  opacity: 0.38;
}

/* Lebar mengikuti isi (dua tombol + slider + dua gap). Nilai tetap
 * sebelumnya 130px lebih kecil dari isi sehingga tombol kanan keluar
 * dari viewport pada lebar desktop. */
.player__vol { display: flex; align-items: center; gap: 6px; flex: none; }
.player__volume {
  -webkit-appearance: none;
  appearance: none;
  width: 84px;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  cursor: pointer;
}
.player__volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--bg-soft);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.player__volume::-moz-range-thumb {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--bg-soft);
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--player-h) + 18px);
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(92vw, 460px);
  padding: 11px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, 14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast svg { color: var(--accent); }
.toast.is-error svg { color: var(--danger); }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.footer {
  margin-top: 40px;
  padding: 34px 0 26px;
  border-top: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--bg-soft) 55%, transparent);
}
/* Jumlah kolom ditulis eksplisit, bukan auto-fit. Kolom "Aplikasi Android"
 * memakai grid-column: 1 / -1, dan auto-fit menghitung track kosong
 * sebagai "terisi" begitu ada item yang membentang di seluruh baris.
 * Akibatnya track kosong tidak collapse dan kolom .footer__about tinggal
 * sekitar 64px di layar 1440px. */
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(140px, 1fr));
  gap: 28px;
  margin-bottom: 26px;
}
.footer__about { max-width: 42ch; color: var(--text-muted); font-size: 13.5px; }
.footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-weight: 800; }
.footer h3 {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer li + li { margin-top: 8px; }
.footer li a { font-size: 13.5px; color: var(--text-muted); }
.footer li a:hover { color: var(--primary-soft); }
.footer__social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.footer__social img {
  width: 30px; height: 30px;
  object-fit: contain;
  padding: 5px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
}
/* Baris penuh, bukan kolom kelima. Track auto-fit di grid footer punya
 * lebar minimum 140px sehingga badge (132px + padding + border = 156px)
 * selalu terpotong di tablet; jadi blok sendiri yang lebar penuh. */
.footer__app {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
}
.footer__app h3 { margin-bottom: 0; }
.footer__app-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Badge Google Play dan QR sama-sama diberi alas putih di kedua tema.
 * Badge-nya gelap dan transparan (rata-rata luminance 62/255), jadi
 * tanpa alas putih isinya hilang begitu footer masuk mode gelap. */
.footer__store,
.footer__qr {
  display: inline-block;
  flex: none;
  background: #fff;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.footer__store {
  padding: 7px 11px;
  border-radius: 10px;
}
.footer__qr {
  padding: 6px;
  border-radius: 12px;
}
.footer__store:hover,
.footer__qr:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
/* 132px mengikuti lebar badge aslinya (498/201) supaya tidak pecah,
 * dan cukup besar untuk teks "GET IT ON Google Play" tetap terbaca. */
.footer__store img { display: block; width: 132px; height: auto; }
.footer__qr img { display: block; width: 112px; height: auto; }
.footer__app-hint {
  margin: 0;
  max-width: 24ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  font-size: 12.5px;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   15. Share sheet
   -------------------------------------------------------------------------- */

.share {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
}
.share[hidden] { display: none; }

.share__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 17, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: share-fade 180ms ease-out;
}

/* Papan memakai warna surface (bukan surface-2) supaya terasa seperti
   lapisan di atas player dan toast, bukan kartu di dalam halaman. */

.share__panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: share-rise 220ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.share__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.share__head-text { flex: 1 1 auto; min-width: 0; }
.share__title { font-size: 17px; }
.share__desc {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
.share__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.share__close:hover { background: var(--surface-3); color: var(--text); }

.share__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.share__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  padding: 14px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-align: center;
  transition: background var(--transition), border-color var(--transition), transform 120ms ease;
}
.share__btn:hover {
  background: var(--surface-3);
  border-color: var(--primary);
}
.share__btn:active { transform: scale(0.97); }
.share__btn[hidden] { display: none; }

.share__icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-pill);
  color: #fff;
}
.share__icon .icon { width: 22px; height: 22px; }

/* Warna merek dipakai sebagai isian bulatan, teksnya selalu putih
   supaya kontrasnya tetap tinggi di kedua tema. */
.share__icon--whatsapp { background: #25d366; }
.share__icon--facebook { background: #1877f2; }
.share__icon--x { background: #000; }
/* X selalu lingkaran hitam + glyph putih di kedua tema (identitas merek X).
 * Override lama (lingkaran terang di tema gelap) membuat glyph putih
 * tak terlihat di atasnya. */
.share__icon--telegram { background: #229ed9; }
.share__icon--copy { background: var(--primary); }
.share__icon--native { background: var(--surface-3); color: var(--text); }

.share__label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

@keyframes share-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes share-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .now-playing { max-width: 420px; }
  .station { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 900px) {
  /* Kolom pencarian tidak lagi muat berdampingan dengan lima tautan nav dan
   * dua tombol: pada 834px .header__tools terdorong keluar viewport. Jadi
   * pada 900px sudah dikecilkan menjadi tombol ikon. */
  .search { display: none; }
  .header__search-mobile { display: block; }
  .header__tools { margin-left: auto; }
  .nav__link { padding: 8px 11px; }
  /* Tagline brand adalah barang paling lebar yang bisa dilepas tanpa
   * kehilangan informasi: melepas ruang cukup untuk membuat
   * .header__tools muat kembali. */
  .brand { flex: 0 1 auto; min-width: 0; }
  .brand__text { min-width: 0; overflow: hidden; }
  .brand__text small { display: none; }
  .brand__text > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .search--mobile-open {
    display: block;
    position: absolute;
    top: var(--header-h); left: 0; right: 0;
    padding: 10px 16px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }

  .player__meta { width: 150px; }
  .player__vol { width: auto; }
  .player__volume { width: 64px; }

  /* Perangkat lebar tapi pendek (Galaxy Z Fold 6 707x823, HP flagship
   * landscape) masih muat dua kolom. Kolom logo diperkecil supaya
   * konten tidak terdesak, dan tetap di bawah 820px baru jadi satu
   * kolom. */
  .station { grid-template-columns: 176px minmax(0, 1fr); gap: 20px; }
}

[data-theme="light"] .stream-box__label {
  color: #086b54;
  background: #d6f7ec;
}
[data-theme="light"] .section__link:hover { color: #3a44b8; }

@media (max-width: 820px) {
  :root { --header-h: 58px; --player-h: 68px; }

  .nav {
    position: fixed;
    top: var(--header-h); left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 16px 16px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__link { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 15px; }

  .nav-toggle { display: inline-grid; }
  .search { order: 3; flex: 1 1 100%; }

  /* Header tetap satu baris pada layar sempit. Brand boleh menyusut dan
   * teksnya dipotong, karena kalau membungkus ke baris kedua tombol menu
   * ikut turun ke bawah --header-h lalu tertutup panel navigasi, sehingga
   * menu tidak bisa ditutup dengan menekan tombolnya. */
  .header__inner { flex-wrap: nowrap; }
  .brand { flex: 0 1 auto; min-width: 0; }
  .brand__text { min-width: 0; overflow: hidden; }
  .brand__text small,
  .brand__text > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header__spacer { display: none; }

  .grid { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 12px; }
  .cats { grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 10px; }

  /* minmax(0, 1fr), bukan 1fr. Track "1fr" punya minimum otomatis
   * sebesar min-content isinya, dan tombol "Putar <nama stasiun>"
   * memakai white-space:nowrap sehingga min-content-nya bisa jauh
   * lebih lebar daripada layar. Akibatnya satu kolom melebar keluar
   * viewport dan seluruh halaman bisa digeser ke samping. */
  .station { padding-top: 24px; }

  /* Player HP disusun ulang jadi grid dua baris:
   *   [artwork] [nama stasiun] [tombol play]
   *             [status LIVE/Gagal]
   * Sebelumnya status menyatu di bawah tombol play dalam kolom yang
   * lebarnya ikut teks status, sehingga tombol play bergeser sendiri
   * saat status berubah (mis. "Menyambung" jauh lebih lebar dari
   * "LIVE") dan terlihat bertumpuk. Di sini tombol play occupy kolom
   * kanan yang lebarnya tetap, jadi posisinya tidak pernah bergeser. */
  .player__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "art meta   controls"
      "art status  controls";
    align-items: center;
    column-gap: 11px;
    row-gap: 1px;
  }
  .player__art { grid-area: art; align-self: center; }
  .player__meta { grid-area: meta; align-self: end; width: auto; }
  /* Contents membuat anak-anaknya ikut jadi item grid, sehingga bar
   * status bisa ditempatkan terpisah dari tombol kontrol. */
  .player__center { display: contents; }
  .player__controls { grid-area: controls; }
  .player__bar {
    grid-area: status;
    align-self: start;
    width: auto;
  }
  .player__status {
    min-width: 0;
    text-align: left;
    font-size: 10px;
    letter-spacing: 0.07em;
  }
  .player__vol,
  .player__bar .player__track { display: none; }
  .player__btn--side { display: none; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .footer__about { grid-column: 1 / -1; }

  /* Di layar kecil sheet jadi panel dari bawah, seperti bottom sheet
     bawaan sistem, dan menempel penuh ke tepi bawah. */
  .share { place-items: end center; padding: 0; }
  .share__panel {
    max-width: 560px;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
    animation: share-slide 240ms cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  .share__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .share__btn { padding: 12px 6px; }
  .share__icon { width: 38px; height: 38px; }
  .share__icon .icon { width: 20px; height: 20px; }

  @keyframes share-slide {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}

/* Satu kolom baru dipakai di bawah 700px. Galaxy Z Fold 6 (707px)
 * dan HP flagship landscape masih dapat dua kolom, sehingga logo
 * tidak sendirian dengan ruang kosong besar di sebelahnya. */
@media (max-width: 700px) {
  .station { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .station__art-col { max-width: 240px; }
  .station__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .wrap { padding-inline: 14px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat { padding: 12px 6px 10px; }
  .cat img { width: 38px; height: 38px; }
  .cat__name { font-size: 11.5px; }
  .hero { padding: 28px 0 24px; }
  .section { padding: 28px 0 4px; }
  .card-station__body { padding: 9px 10px 10px; }
  .card-station__title { font-size: 12.5px; }
  .footer__grid { grid-template-columns: 1fr; }

  /* Nama stasiun bisa panjang sekali ("Shining Light Christian Radio -
   * Nigeria, Oyo State, Ibadan"). Di layar sempit tombol Putar
   * dibuat penuh baris dan teksnya boleh membungkus, sedangkan dua
   * tombol lain berbagi baris. */
  .station__actions { gap: 8px; }
  .station__actions .btn { min-width: 0; flex: 1 1 0; }
  .station__actions .js-play {
    flex: 1 1 100%;
    white-space: normal;
    height: auto;
    min-height: 48px;
    padding: 12px 18px;
    line-height: 1.35;
    text-align: center;
  }
  .station__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stat-card { padding: 10px 10px; }
  .stat-card strong { font-size: 15px; }

  /* Layar HP: teks brand (nama + tagline) disembunyikan, tinggal logo
   * saja supaya tidak mengecil/terpotong dan header tetap satu baris.
   * Logo diperbesar sedikit agar lebih jelas. */
  .brand { gap: 0; }
  .brand__text { display: none; }
  .brand__mark { width: 42px; height: 42px; border-radius: 12px; }
  .brand__mark img { width: 42px; height: 42px; border-radius: 12px; }
}

/* Hormati preferensi pengguna yang mengurangi animasi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Cetak */
@media print {
  .header, .player, .footer, .hero__cta, .load-more, .pagination { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Pemilih bahasa (dropdown di header) */
.lang-select-wrapper {
  display: flex;
  align-items: center;
}
.lang-select {
  max-width: 132px;
  height: 38px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--border, rgba(128, 128, 128, .35));
  border-radius: 10px;
  background: var(--surface-2, transparent);
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.lang-select option {
  color: #111;
  background: #fff;
}/* --------------------------------------------------------------------------
   15. Popup status stream (menghubungkan / gagal)
   Kartu non-blocking di atas player: spinner saat mencoba koneksi,
   ikon tegas + tombol aksi saat URL mati. Ikon/teks diisi app.js.
   -------------------------------------------------------------------------- */
.snotice {
  position: fixed;
  left: 50%;
  bottom: calc(var(--player-h) + 16px);
  z-index: 150;
  width: min(92vw, 430px);
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.snotice[hidden] { display: none; }
.snotice.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.snotice__card {
  position: relative;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.snotice__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--text-dim);
  background: transparent;
  border: 0;
  border-radius: 50%;
}
.snotice__close:hover { color: var(--text); background: var(--surface-2); }
.snotice__close[hidden] { display: none; }
.snotice__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #fff;
}
.snotice__icon.is-loading { background: var(--primary); }
.snotice__icon.is-error { background: var(--danger); }
.snotice__spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: snotice-spin 800ms linear infinite;
}
@keyframes snotice-spin {
  to { transform: rotate(360deg); }
}
.snotice__body { flex: 1 1 200px; min-width: 0; }
.snotice__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.snotice__station {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.snotice__msg {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.snotice__progress {
  height: 5px;
  margin-top: 10px;
  overflow: hidden;
  background: var(--surface-3);
  border-radius: var(--radius-pill);
}
.snotice__progress[hidden] { display: none; }
.snotice__bar {
  height: 100%;
  width: 0;
  background: var(--primary);
  border-radius: var(--radius-pill);
  transition: width 300ms ease;
}
.snotice__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex: 1 1 100%;
  margin-top: 2px;
}
.snotice__actions .btn { height: 38px; padding: 0 16px; font-size: 13px; }
.snotice__actions [hidden] { display: none; }

@media (max-width: 560px) {
  .snotice {
    left: 12px;
    right: 12px;
    width: auto;
    transform: translateY(16px);
  }
  .snotice.is-visible { transform: translateY(0); }
}
/* --------------------------------------------------------------------------
   15b. Aksen warna popup status stream (kontras di tema gelap & terang)
   Kartu diberi tint + border + halo sesuai mode, supaya notif langsung
   terlihat tanpa mengorbankan kesan elegan.
   -------------------------------------------------------------------------- */
.snotice__card {
  border-width: 1.5px;
}
.snotice--connecting .snotice__card {
  background: color-mix(in srgb, var(--primary) 13%, var(--surface));
  border-color: var(--primary);
  box-shadow: var(--shadow-lg), 0 0 0 4px var(--primary-dim), 0 0 30px var(--primary-dim);
}
.snotice--failed .snotice__card {
  background: color-mix(in srgb, var(--danger) 11%, var(--surface));
  border-color: var(--danger);
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(242, 84, 91, 0.14), 0 0 30px rgba(242, 84, 91, 0.20);
}
.snotice--connecting .snotice__title { color: var(--primary-soft); }
.snotice--failed .snotice__title { color: var(--danger); }
.snotice--connecting .snotice__station { color: var(--text); }
.snotice--failed .snotice__station { color: var(--text); }

/* --------------------------------------------------------------------------
   16. Slot iklan Google AdSense
   -------------------------------------------------------------------------- */
.ad-slot {
  width: 100%;
  max-width: 728px;
  margin: 22px auto;
  min-height: 90px;
  overflow: hidden;
  text-align: center;
}
.ad-slot .adsbygoogle { display: inline-block; width: 100%; max-width: 728px; }
.ad-slot--preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  border: 1.5px dashed color-mix(in srgb, var(--text-muted) 45%, transparent);
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.1em;
  background: color-mix(in srgb, var(--surface-sunken, #0b1020) 60%, transparent);
}
/* Unit yang dilebarkan saat disisipkan di dalam grid CSS (stations.php). */
.grid__ad { grid-column: 1 / -1; margin: 8px 0; }