:root {
  color-scheme: light;
  --navy: #102b49;
  --blue: #176da8;
  --sky: #eaf5ff;
  --green: #14763f;
  --ink: #182638;
  --muted: #637184;
  /* Tinggi bar navigasi mobile + sedikit ruang napas; satu-satunya angka yang
       dipakai semua penyangga bawah supaya isinya tidak ditumpuk berkali-kali. */
  --bar-reserve: 76px;
  --line: #e0e7ef;
  --soft: #f5f8fb;
  --radius: 18px;
  /* Token gerak: dipakai bagian "gerak & poles" di akhir berkas. */
  --ease: cubic-bezier(.22, .68, .35, 1);
  --laju-1: 150ms;
  --laju-2: 240ms;
  --laju-3: 380ms;
  font-family: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: #fff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

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

body {
  min-width: 320px;
  margin: 0;
  background: #fff;
  line-height: 1.65;
}

img {
  max-width: 100%;
}

h1,
h2,
h3,
b,
strong {
  font-family: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(2.3rem, 5vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -.045em;
}

h2 {
  margin-bottom: 14px;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.17;
  letter-spacing: -.035em;
}

h3 {
  line-height: 1.3;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid #79bfff;
  outline-offset: 3px;
}

.site-header {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px max(5vw, 24px);
  border-bottom: 1px solid #edf1f5;
  /* Solid, not translucent: any backdrop-filter here turns the header into a
     containing block, so the fixed mobile nav bar below can no longer reach
     the viewport bottom and is painted over the brand logo instead. */
  background: #fff;
}

.brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.brand img {
  width: 49px;
  height: 49px;
  flex: 0 0 auto;
  border-radius: 8px;
  object-fit: contain;
}

.brand span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.brand b {
  color: var(--navy);
  font-size: 1.12rem;
}

.brand small {
  color: var(--muted);
  font-size: .75rem;
}

nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 30px);
  font-size: .92rem;
  font-weight: 600;
}

nav a,
.text-link {
  transition: color .18s ease;
}

nav a:hover,
.text-link:hover {
  color: var(--blue);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font-size: 1.35rem;
  cursor: pointer;
}

.hero {
  position: relative;
  display: grid;
  min-height: 475px;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, .75fr);
  align-items: center;
  gap: 40px;
  isolation: isolate;
  overflow: hidden;
  padding: 72px max(7vw, 24px);
  background: linear-gradient(115deg, #102b49 0%, #15578a 68%, #2386cf 100%);
  color: #fff;
}

.hero::before,
.hero::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.hero::before {
  top: -260px;
  right: 12%;
  width: 640px;
  height: 640px;
}

.hero::after {
  top: -180px;
  right: 18%;
  width: 480px;
  height: 480px;
}

.hero-copy {
  max-width: 760px;
}

.hero h1 {
  max-width: 760px;
  margin: 12px 0 22px;
}

.hero-copy > p:not(.eyebrow) {
  max-width: 640px;
  color: #e1effb;
  font-size: 1.08rem;
}

.hero-copy .source-note {
  display: block;
  margin-top: 12px;
  color: #c6d9e8;
  font-size: .76rem;
  line-height: 1.5;
}

.pillar-card .source-note,
.about-section .source-note {
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.hero-actions .button {
  margin-top: 0;
}

.hero-actions .button-ghost {
  border-color: rgb(255 255 255 / 45%);
  background: transparent;
  color: #fff;
  box-shadow: none;
}

.hero-actions .button-ghost:hover {
  border-color: #fff;
  background: rgb(255 255 255 / 12%);
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.pillar-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  background: #fff;
  box-shadow: 0 12px 30px #102b490d;
}

.pillar-card b {
  color: var(--navy);
  font-size: 1.05rem;
  letter-spacing: -.01em;
}

.pillar-card p {
  flex: 1;
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.65;
}

.about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: .9rem;
  font-weight: 600;
}

.eyebrow {
  margin-bottom: 12px;
  color: var(--blue);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
}

.hero-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgb(168 217 255 / 35%);
  border-radius: 99px;
  padding: 7px 11px;
  background: rgb(255 255 255 / 7%);
  font-size: .66rem;
  letter-spacing: .12em;
}

.hero .eyebrow {
  color: #a8d9ff;
}

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

.hero-mark img {
  width: min(310px, 90%);
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 50%;
  padding: 28px;
  background: rgb(255 255 255 / 96%);
  object-fit: contain;
  box-shadow: 0 24px 70px #061b3355;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border: 0;
  border-radius: 9px;
  padding: 12px 19px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
}

.button-light {
  margin-top: 15px;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 8px 24px #061b3320;
  transition: transform .18s ease, box-shadow .18s ease;
}

.button-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px #061b3333;
}

.stats {
  display: grid;
  max-width: 1120px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: -1px auto 0;
  border-bottom: 1px solid var(--line);
  padding: 25px 30px;
  background: #fff;
}

.stats div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stats div + div {
  border-left: 1px solid var(--line);
}

.stats strong {
  color: var(--navy);
  font-size: 1.08rem;
}

.stats span {
  color: var(--muted);
  font-size: .8rem;
}

.section {
  max-width: 1440px;
  margin: auto;
  padding: 88px max(7vw, 24px);
}

.section-heading h2,
.about-section h2 {
  color: var(--navy);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 32px;
}

.section-heading p:not(.eyebrow) {
  margin-bottom: 0;
  color: var(--muted);
}

.text-link {
  color: var(--blue);
  font-size: .9rem;
  font-weight: 700;
}

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

.article-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 5px 20px #102b4908;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.article-card:hover {
  transform: translateY(-3px);
  border-color: #c8d7e5;
  box-shadow: 0 12px 32px #102b4910;
}

.article-cover {
  display: block;
  width: 100%;
  height: 205px;
  object-fit: cover;
}

.placeholder-cover {
  display: grid;
  place-items: center;
  background: var(--sky);
}

.placeholder-cover img {
  width: 95px;
  height: 95px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.article-body {
  padding: 22px;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: .76rem;
}

.article-meta span:first-child {
  color: var(--green);
  font-weight: 700;
}

.article-body h3 {
  margin-bottom: 10px;
  font-size: 1.15rem;
}

.article-body > p {
  color: var(--muted);
  font-size: .9rem;
}

.article-open {
  margin-top: 14px;
  align-self: flex-start;
}

/* Pembaca artikel layar penuh — dialog, bukan ekspansi di dalam kartu. */
body.is-locked {
  overflow: hidden;
}

.article-reader {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #fff;
  color: var(--ink);
}

.article-reader::backdrop {
  background: rgb(8 20 35 / 72%);
}

.article-reader[open] {
  display: flex;
}

.reader-shell {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.reader-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px max(18px, env(safe-area-inset-left)) 12px max(18px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.reader-bar button {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 15px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
}

.reader-bar button:hover {
  border-color: #a7c3da;
  background: var(--soft);
}

.reader-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Sampul dan gambar isi artikel tidak pernah dipotong: elemennya yang mengikuti
   rasio asli foto, bukan bingkainya. Foto potret dibatasi tingginya supaya
   judul tetap dekat, foto landskap dibiarkan melebar penuh. */
.reader-cover {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  background: #eef3f8;
}

.reader-cover.is-potret {
  width: auto;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
}

/* Wadah selebar 1120px, kolom teks 676px di tengahnya. Gambar beresolusi besar
   dipindah oleh app.js ke jalur "full" sehingga membentang sampai wadah. Lebar
   jalur memakai kontainer, bukan `vw`, agar garis gulir tidak memotongnya. */
.reader-article {
  display: grid;
  grid-template-columns:
    [full-start] minmax(22px, 1fr)
    [text-start] minmax(0, 676px)
    [text-end] minmax(22px, 1fr)
    [full-end];
  max-width: min(1120px, 100%);
  margin: 0 auto;
  padding: 30px 0 calc(70px + env(safe-area-inset-bottom));
}

.reader-article > * {
  grid-column: text;
  min-width: 0;
}

.reader-article > .is-lebar {
  grid-column: full;
}

.reader-article h2 {
  margin: 14px 0 16px;
  color: var(--navy);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.3rem);
  line-height: 1.22;
}

.reader-article p {
  margin: 0 0 18px;
  font-size: 1.06rem;
  line-height: 1.75;
}

.reader-article h3,
.reader-article h4 {
  margin: 1.5em 0 .55em;
  color: var(--navy);
  line-height: 1.35;
}

.reader-article ul,
.reader-article ol {
  padding-left: 1.4em;
  margin: 0 0 18px;
  line-height: 1.75;
}

.reader-article blockquote {
  margin: 22px 0;
  padding: 12px 18px;
  border-left: 3px solid var(--green);
  background: var(--soft);
  color: var(--navy);
}

.reader-article img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 22px auto;
  border-radius: 12px;
}

/* Isi gambar dibaca utuh: yang potret dibatasi tingginya, yang resolusi aslinya
   besar mengisi lebar jalur "full". Tidak ada `max-height` pada gambar melebar
   karena memotong tinggi berarti merentangkan rasio aslinya. */
.reader-article img.is-potret {
  width: auto;
  max-width: 100%;
  max-height: 78vh;
}

.reader-article .is-lebar img {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Setiap gambar dapat dibuka selebar layar, jadi kursornya zoom-in. */
.reader-scroll img {
  cursor: zoom-in;
}

.reader-article a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.reader-article [data-size="small"] { font-size: .88em; }
.reader-article [data-size="large"] { font-size: 1.2em; }
.reader-article [data-font="serif"] { font-family: Georgia, "Times New Roman", serif; }

/* Tabel yang dibuat di dasbor harus tetap terbaca di halaman publik. */
.reader-article table {
  width: 100%;
  margin: 0 0 1.2em;
  border-collapse: collapse;
  font-family: Inter, system-ui, sans-serif;
  font-size: .92em;
  line-height: 1.6;
}

.reader-article th,
.reader-article td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.reader-article th {
  background: #f6f8f7;
  font-weight: 800;
}

@media (max-width: 680px) {
  /* Tabel lebar digeser di dalam tabelnya, bukan seluruh layar pembaca. */
  .reader-article { overflow-wrap: anywhere; }
  .reader-article table { display: block; overflow-x: auto; white-space: nowrap; }
  .reader-article td,
  .reader-article th { white-space: normal; min-width: 110px; }
}

.reader-lead {
  color: var(--navy);
  font-size: 1.12rem !important;
  font-weight: 600;
}

.reader-byline {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .88rem !important;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Yang fullscreen adalah dokumen, dialog-nya tetap di atas — jaga agar dasarnya putih. */
:root:fullscreen .article-reader {
  background: #fff;
}

.greeting-section {
  display: grid;
  grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
  align-items: center;
  gap: 60px;
  padding: 76px max(10vw, 24px);
  background: var(--soft);
}

.greeting-copy {
  border-left: 3px solid #d6e7f6;
  padding-left: 28px;
}

.greeting-photo {
  display: grid;
  min-height: 300px;
  place-items: center;
}

.greeting-photo img {
  width: min(300px, 100%);
  max-height: 360px;
  border-radius: 20px;
  background: #fff;
  object-fit: cover;
  box-shadow: 0 16px 50px #102b4912;
}

/* Foto sambutan memakai bingkai yang memotong; logo tidak boleh dipotong. */
.greeting-photo img[src*="logo-pii"] {
  object-fit: contain;
}

.greeting-copy {
  max-width: 800px;
}

.greeting-copy h2 {
  margin-bottom: 5px;
}

.role {
  margin-bottom: 22px;
  color: var(--muted);
  font-size: .9rem;
}

.greeting-text {
  font-size: 1rem;
  line-height: 1.9;
  white-space: pre-line;
}

.about-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 80px;
}

.about-section > div:last-child {
  color: #435268;
  font-size: 1.02rem;
}

.office-address {
  margin: 18px 0 0;
  font-size: .94rem;
  line-height: 1.7;
}

.gallery-section {
  background: #fff;
}

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

.gallery-item {
  min-width: 0;
  min-height: 240px;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--soft);
}

.gallery-item img {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform .35s ease;
}

.gallery-item:hover img {
  transform: scale(1.025);
}

.gallery-item figcaption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
}

.gallery-item figcaption span {
  color: var(--muted);
  font-size: .85rem;
}

footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 16px 28px;
  padding: 32px max(5vw, 24px);
  background: #0d233b;
  color: #d5e1ee;
}

footer .brand b {
  color: #fff;
}

footer .brand small,
footer > p,
footer > small {
  color: #b3c4d6;
}

footer > p {
  margin: 0;
  font-size: .85rem;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: .82rem;
}

.footer-links:empty {
  display: none;
}

.footer-links a:hover,
.admin-link:hover {
  text-decoration: underline;
}

footer > small {
  grid-column: 1 / -1;
  border-top: 1px solid #ffffff22;
  padding-top: 16px;
}

/* Baris kredit pembuat, duduk tepat di bawah baris hak cipta tanpa garis
   pemisah ganda. */
.footer-credit {
  border-top: 0;
  padding-top: 6px;
  color: #93aec9;
}

.admin-link {
  color: #c3dff7;
  font-size: .8rem;
}

.footer-auth {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.empty-state {
  grid-column: 1 / -1;
  border: 1px dashed #cbd7e3;
  border-radius: var(--radius);
  padding: 35px;
  background: linear-gradient(145deg, #fff, #f8fbfe);
}

.empty-state h3 {
  margin-bottom: 6px;
}

.empty-state p,
.muted {
  color: var(--muted);
}

.hidden {
  display: none !important;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(180px, .8fr);
    gap: 24px;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .stats div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
    padding-top: 14px;
  }

  .article-grid,
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .greeting-section,
  .about-section {
    gap: 40px;
  }
}

@media (max-width: 680px) {
  html {
    scroll-padding-top: 78px;
  }

  .site-header {
    min-height: 68px;
    padding: 8px 18px;
  }

  .brand {
    gap: 9px;
  }

  .brand img {
    width: 42px;
    height: 42px;
  }

  .brand b {
    font-size: 1rem;
  }

  .brand small {
    font-size: .68rem;
  }

  .menu-toggle {
    display: inline-flex;
    flex: 0 0 auto;
  }

  nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    display: none;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--line);
    padding: 8px 18px 14px;
    background: #fff;
    box-shadow: 0 14px 20px #102b4910;
  }

  nav.open {
    display: flex;
    flex-direction: column;
  }

  nav a {
    border-radius: 8px;
    padding: 11px 10px;
  }

  nav a:hover {
    background: var(--soft);
  }

  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 54px 24px 44px;
  }

  .hero h1 {
    font-size: clamp(2.3rem, 10vw, 3.5rem);
  }

  .hero-copy > p:not(.eyebrow) {
    font-size: 1rem;
  }

  .hero-mark img {
    width: min(210px, 62vw);
    padding: 22px;
  }

  .stats {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 24px 20px;
  }

  .stats div {
    padding: 2px 0;
  }

  .section {
    padding: 58px 22px;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
  }

  .article-grid,
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .article-cover {
    height: 220px;
  }

  .greeting-section {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 52px 22px;
  }

  .greeting-copy {
    border-top: 2px solid #d6e7f6;
    border-left: 0;
    padding-top: 22px;
    padding-left: 0;
  }

  .greeting-photo {
    min-height: 0;
  }

  .greeting-photo img {
    width: min(240px, 72vw);
    max-height: 300px;
  }

  .about-section {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .gallery-item img {
    height: 240px;
  }

  footer {
    grid-template-columns: 1fr auto;
    gap: 14px 20px;
    padding: 26px 22px;
  }

  footer .brand {
    grid-column: 1;
    grid-row: 1;
  }

  footer .footer-auth {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    gap: 12px;
  }

  footer > p {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .footer-links {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  footer > small {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .footer-credit {
    grid-row: 5;
  }
}

@media (max-width: 380px) {
  .site-header {
    padding-right: 12px;
    padding-left: 12px;
  }

  .hero,
  .section,
  .greeting-section {
    padding-right: 16px;
    padding-left: 16px;
  }

  .article-body {
    padding: 18px;
  }

  .article-meta {
    flex-wrap: wrap;
  }

  footer {
    padding-right: 16px;
    padding-left: 16px;
  }
}

@media (max-width: 680px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px;
  }
}

/* ==========================================================================
   Profil kader — kartu identitas satu kolom, ritme dan bahasa visual sama
   dengan feed supaya pindah fitur tidak terasa pindah aplikasi.
   ========================================================================== */

.profil-page main {
  padding-inline: 16px;
}

.profil-board {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 22px 0 34px;
  display: grid;
  gap: 14px;
}

.profil-skeleton {
  display: grid;
  gap: 10px;
  padding: 18px 0;
}

.profil-skeleton .skeleton {
  height: 15px;
  border-radius: 8px;
}

.profil-pesan {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
  color: var(--muted);
  font-size: .88rem;
}

/* ------------------------------------------------------------ pencarian */

.profil-cari {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 9px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 7px 8px 7px 13px;
  box-shadow: 0 8px 22px #102b490c;
}

.profil-cari svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.profil-cari input {
  border: 0;
  background: transparent;
  font: 500 .9rem/1.4 inherit;
  color: var(--ink);
  min-width: 0;
}

.profil-cari input:focus-visible {
  outline: none;
}

.profil-cari button {
  border: 1px solid var(--navy);
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font: 700 .78rem/1 inherit;
  padding: 9px 14px;
  cursor: pointer;
}

.profil-temuan {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 12px;
  box-shadow: 0 10px 26px #102b490f;
}

.profil-temuan-judul {
  margin: 0;
  font: 700 .74rem/1 inherit;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------------- kartu inti */

.profil-kartu {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 12px 30px #102b4912;
  overflow: hidden;
  display: grid;
  gap: 0;
}

.profil-sampul {
  position: relative;
  height: 168px;
  background:
    radial-gradient(120% 120% at 12% 0%, #1c5f92 0%, #102b49 58%, #0b1f36 100%);
}

.profil-sampul img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profil-sampul::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#0b1f3600 40%, #0b1f365c 100%);
  pointer-events: none;
}

.profil-atas {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 12px;
  align-items: end;
  margin-top: -42px;
  padding: 0 18px;
  position: relative;
  z-index: 1;
}

.profil-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--navy);
  font: 800 1.7rem/1 inherit;
  border: 3px solid #fff;
  box-shadow: 0 8px 20px #102b4922;
  overflow: hidden;
}

.profil-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profil-avatar.ada-foto > span {
  display: none;
}

.profil-sakelar {
  grid-column: 3;
  display: flex;
  gap: 8px;
  align-items: center;
  padding-bottom: 4px;
}

.profil-ikuti {
  border: 1px solid var(--blue);
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font: 700 .82rem/1 inherit;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.profil-ikuti:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.profil-ikuti.is-on {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.profil-ikuti:disabled {
  opacity: .6;
  cursor: progress;
}

.profil-ikuti + .profil-toast,
.profil-sakelar + .profil-toast {
  position: absolute;
  right: 18px;
  bottom: 62px;
}

.profil-toast {
  display: inline-block;
  max-width: 260px;
  border-radius: 12px;
  background: #102b49f2;
  color: #fff;
  font-size: .8rem;
  line-height: 1.35;
  padding: 9px 12px;
  box-shadow: 0 10px 24px #102b4940;
}

.profil-kartu h1 {
  margin: 14px 18px 2px;
  font-size: clamp(1.32rem, 4vw, 1.72rem);
  line-height: 1.16;
  letter-spacing: -.02em;
  color: var(--navy);
}

.profil-akun {
  margin: 0 18px;
  font: 600 .88rem/1.4 inherit;
  color: var(--blue);
}

.profil-bio {
  margin: 10px 18px 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-line;
}

.profil-attr {
  list-style: none;
  margin: 12px 18px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.profil-attr li {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: .84rem;
  color: var(--muted);
}

.profil-attr svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profil-jaring {
  margin: 12px 18px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profil-jaring-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--navy);
  font: 600 .78rem/1 inherit;
  padding: 8px 12px;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}

.profil-jaring-chip:hover {
  border-color: #b9d8f0;
  background: var(--sky);
}

.profil-jaring-chip svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.profil-angka {
  margin: 16px 0 0;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  background: linear-gradient(#fff, #f7fafd);
}

.profil-angka-item {
  display: grid;
  gap: 3px;
  justify-items: center;
  text-align: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 4px;
}

.profil-angka-item b {
  font-size: 1.12rem;
  color: var(--navy);
}

.profil-angka-item small {
  font-size: .76rem;
  letter-spacing: .02em;
  color: var(--muted);
}

button.profil-angka-item {
  cursor: pointer;
  transition: background .18s ease;
}

button.profil-angka-item:hover {
  background: var(--sky);
}

/* ------------------------------------------------------------------ tabs */

.profil-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 2px;
  scrollbar-width: none;
  position: sticky;
  top: 58px;
  z-index: 6;
  background: linear-gradient(#fff 76%, #fff0);
}

.profil-tabs::-webkit-scrollbar {
  display: none;
}

.profil-tabs button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font: 600 .84rem/1 inherit;
  padding: 9px 15px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.profil-tabs button:hover {
  color: var(--blue);
  border-color: #b9d8f0;
}

.profil-tabs button.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.profil-masuk {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed #cddbea;
  border-radius: var(--radius);
  background: var(--soft);
  color: var(--muted);
  font-size: .88rem;
}

.profil-masuk .text-link {
  font-weight: 700;
}

.profil-daftar {
  display: grid;
  gap: 12px;
}

.profil-kosong {
  margin: 0;
  padding: 16px 14px;
  border: 1px dashed #cddbea;
  border-radius: var(--radius);
  background: var(--soft);
  color: var(--muted);
  font-size: .88rem;
  text-align: center;
}

/* ------------------------------------------------------ daftar orang */

.profil-orang {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 11px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.profil-orang:hover {
  border-color: #b9d8f0;
  box-shadow: 0 10px 24px #102b4910;
}

.profil-orang-ava {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--navy);
  font: 800 .95rem/1 inherit;
  overflow: hidden;
}

.profil-orang-ava img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profil-orang-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.profil-orang-copy b {
  font-size: .92rem;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profil-orang-copy small {
  font-size: .76rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profil-orang-angka {
  font-size: .76rem;
  color: var(--muted);
  white-space: nowrap;
}

/* --------------------------------------------------------- kabar kader */

.profil-kabar {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.profil-kabar-top {
  margin: 0;
  font: 700 .72rem/1 inherit;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.profil-kabar-isi {
  margin: 0;
  font-size: .95rem;
  line-height: 1.58;
  color: var(--ink);
  white-space: pre-line;
}

.profil-media {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 14px;
  overflow: hidden;
}

.profil-media[data-count='1'] {
  grid-template-columns: 1fr;
}

.profil-media[data-count='3'] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profil-media img,
.profil-media video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--soft);
}

.profil-kabar-angka {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  font-size: .78rem;
  color: var(--muted);
}

.profil-kabar-taut {
  margin-left: auto;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}

.profil-kabar-taut:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------------- dialog */

.profil-dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: min(88vh, 900px);
  border: 0;
  border-radius: 20px;
  padding: 0;
  box-shadow: 0 30px 70px #0b1f3659;
}

.profil-dialog::backdrop {
  background: #0b1f36a8;
  backdrop-filter: blur(2px);
}

.profil-form {
  display: grid;
  gap: 12px;
  padding: 18px;
  overflow: auto;
  max-height: min(84vh, 880px);
}

.profil-dialog-atas {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

.profil-dialog-atas h2 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--navy);
}

.profil-tutup {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  width: 34px;
  height: 34px;
  cursor: pointer;
}

.profil-lead {
  margin: 0;
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.5;
}

.profil-gambar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: stretch;
}

.profil-gambar-kotak {
  display: grid;
  gap: 6px;
  justify-items: center;
  align-content: center;
  text-align: center;
}

.profil-avatar-besar {
  width: 78px;
  height: 78px;
  border: 2px solid var(--line);
  box-shadow: none;
  margin-top: 3px;
}

.profil-gambar-sampul {
  position: relative;
  border: 1px dashed #cddbea;
  border-radius: 14px;
  background: var(--soft);
  min-height: 92px;
  padding: 10px;
  overflow: hidden;
}

.profil-gambar-sampul img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px;
}

.profil-sampul-teks {
  position: relative;
  z-index: 1;
  font-size: .8rem;
  color: var(--muted);
}

.profil-gambar-sampul .text-link,
.profil-gambar-kotak .text-link {
  position: relative;
  z-index: 1;
}

.profil-lapak {
  display: grid;
  gap: 6px;
  font-size: .84rem;
  font-weight: 700;
  color: var(--navy);
}

.profil-lapak input,
.profil-lapak textarea,
.profil-lapak select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: 500 .92rem/1.5 inherit;
  padding: 11px 12px;
}

.profil-lapak textarea {
  resize: vertical;
  min-height: 74px;
}

.profil-lapak input:focus-visible,
.profil-lapak textarea:focus-visible,
.profil-lapak select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

.profil-lapak small {
  font-size: .76rem;
  font-weight: 500;
  color: var(--muted);
}

.profil-lapak em {
  float: right;
  font-style: normal;
  font-weight: 600;
  font-size: .76rem;
  color: var(--muted);
}

.profil-akun-bungkus {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding-inline: 12px;
}

.profil-akun-bungkus i {
  font-style: normal;
  font-weight: 700;
  color: var(--muted);
}

.profil-akun-bungkus input {
  border: 0;
  padding-inline: 0;
  background: transparent;
}

.profil-akun-bungkus:focus-within {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

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

.profil-jaring-masukan {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfdff;
  padding: 12px;
  display: grid;
  gap: 10px;
  margin: 0;
}

.profil-jaring-masukan legend {
  padding-inline: 6px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--navy);
}

.profil-catatan {
  margin: 0;
  padding: 11px 12px;
  border-radius: 12px;
  background: #fdf1f1;
  border: 1px solid #f0c8c8;
  color: #8f2723;
  font-size: .84rem;
  line-height: 1.45;
}

.profil-catatan.is-ok {
  background: #eefaf1;
  border-color: #bfe6c9;
  color: var(--green);
}

.profil-dialog-bawah {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 4px;
}

@media (max-width: 560px) {
  .profil-atas {
    grid-template-columns: 72px 1fr;
    margin-top: -36px;
  }

  .profil-avatar {
    width: 72px;
    height: 72px;
    font-size: 1.5rem;
  }

  .profil-sakelar {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-bottom: 0;
  }

  .profil-kartu h1 {
    margin-top: 12px;
  }

  .profil-sampul {
    height: 132px;
  }

  .profil-dua {
    grid-template-columns: 1fr;
  }

  .profil-gambar {
    grid-template-columns: 1fr;
  }

  .profil-dialog-bawah {
    position: sticky;
    bottom: 0;
    background: linear-gradient(#fff0, #fff 30%);
    padding-bottom: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .tanya-intro::before,
  .tanya-badge i,
  .tanya-composer.is-busy .tanya-stop {
    animation: none !important;
  }
}

/* An editorial, app-like shell without changing the existing CMS content. */
body {
  background: #f8fafb;
}

.site-header {
  min-height: 72px;
  padding-right: max(6vw, 28px);
  padding-left: max(6vw, 28px);
  border-bottom-color: #e8edf1;
  background: #fff;
}

.brand img {
  border-radius: 50%;
}

nav {
  gap: clamp(18px, 2vw, 28px);
  font-size: .88rem;
}

nav a {
  position: relative;
  padding: 8px 0;
  color: #405168;
}

nav a:hover {
  color: var(--navy);
}

.nav-icon {
  display: none;
}

/* "Masuk" tampil sebagai pil agar jelas ini pintu masuk akun, bukan menu isi. */
nav .nav-masuk {
  padding: 8px 16px;
  border: 1.5px solid #c9dcef;
  border-radius: 999px;
  font-weight: 750;
  color: var(--blue);
  transition: background .15s ease, color .15s ease;
}

nav .nav-masuk:hover {
  background: #edf6fd;
  color: var(--navy);
}

/* Sudah punya sesi: chip akun di header adalah pintasannya, jadi tombol
   "Masuk" tidak boleh lagi berdiri di sampingnya. */
body.ada-sesi .nav-masuk {
  display: none;
}

/* "Lainnya" hanya dipakai di bar bawah ponsel; di layar lebar semua menu sudah tampil. */
.nav-more {
  display: none;
}

.nav-sheet {
  position: fixed;
  z-index: 40;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease, visibility .2s ease;
}

.nav-sheet.is-open {
  visibility: visible;
  opacity: 1;
}

.nav-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(9 30 52 / 52%);
  cursor: default;
}

.nav-sheet-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: min(70dvh, 520px);
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -14px 40px rgb(9 30 52 / 22%);
  transform: translateY(24px);
  overscroll-behavior: contain;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}

.nav-sheet.is-open .nav-sheet-panel {
  transform: none;
}

.nav-sheet-title {
  margin: 0 0 12px;
  color: #6c7d90;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nav-sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 9px;
}

.nav-sheet-grid a {
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 11px;
  border: 1px solid #e7eef4;
  border-radius: 14px;
  padding: 10px 13px;
  background: #f6fafc;
  color: #2f4358;
  font-size: .88rem;
  font-weight: 700;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}

.nav-sheet-grid a:active {
  transform: scale(.97);
}

.nav-sheet-grid a:hover {
  border-color: #b6d0e4;
  background: #eef5fa;
  color: var(--navy);
}

.install-app {
  min-height: 44px;
  border: 1px solid #d8e3ec;
  border-radius: 999px;
  padding: 0 15px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}

.install-app[hidden] {
  display: none;
}

.install-app:hover {
  border-color: #a7c3da;
  background: #f5f9fc;
}

.hero {
  min-height: 500px;
  padding-right: max(10vw, 32px);
  padding-left: max(10vw, 32px);
  background:
    radial-gradient(ellipse at 82% 22%, rgb(46 145 204 / 25%), transparent 36%),
    linear-gradient(118deg, #102b49 0%, #12446c 70%, #176da8 100%);
}

.hero-mark img {
  width: min(285px, 90%);
  border: 0;
  border-radius: 28px;
  padding: 22px;
  box-shadow: 0 18px 55px #061b3340;
}

.stats {
  max-width: 1200px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: #fff;
}

.section {
  padding-top: clamp(64px, 7vw, 96px);
  padding-bottom: clamp(40px, 5vw, 68px);
}

.section-heading {
  margin-bottom: 26px;
}

.article-grid {
  gap: 18px;
}

.article-card {
  border-color: #e5ebf0;
  border-radius: 12px;
  box-shadow: none;
}

.article-card:hover {
  transform: translateY(-2px);
  border-color: #cbd9e4;
  box-shadow: 0 10px 24px #102b490b;
}

.article-cover {
  height: clamp(185px, 19vw, 245px);
}

.article-body {
  padding: 20px;
}

.greeting-section {
  background: #eef3f6;
}

.greeting-copy {
  border-color: #b7d1e4;
}

.gallery-grid {
  gap: 16px;
}

.gallery-item {
  border: 1px solid #e5ebf0;
  border-radius: 12px;
}

.gallery-item img {
  height: clamp(210px, 22vw, 290px);
}

footer {
  padding-right: max(6vw, 28px);
  padding-left: max(6vw, 28px);
  background: #102b49;
}

@media (min-width: 681px) and (max-width: 1024px) {
  .site-header {
    padding-right: 28px;
    padding-left: 28px;
  }

  .hero {
    min-height: 420px;
    gap: 24px;
    padding-right: 6vw;
    padding-left: 6vw;
  }

  .hero-mark img {
    width: min(245px, 86%);
  }

  .section {
    padding-right: 5vw;
    padding-left: 5vw;
  }

  .greeting-section {
    padding-right: 7vw;
    padding-left: 7vw;
  }
}

@media (max-width: 680px) {
  html {
    scroll-padding-top: 70px;
  }

  body {
    padding-bottom: calc(var(--bar-reserve) + env(safe-area-inset-bottom));
    background: #fff;
  }

  .site-header {
    min-height: 62px;
    padding: 7px max(16px, env(safe-area-inset-right)) 7px max(16px, env(safe-area-inset-left));
  }

  .brand {
    gap: 9px;
  }

  .brand img {
    width: 38px;
    height: 38px;
  }

  .brand b {
    font-size: .96rem;
  }

  .brand small {
    font-size: .66rem;
  }

  .install-app {
    min-height: 36px;
    padding: 0 11px;
    font-size: .75rem;
  }

  .account-slot .account-button {
    padding: 0 10px 0 5px;
    font-size: .74rem;
  }

  .account-slot .account-avatar {
    width: 26px;
    height: 26px;
  }

  nav:not(.footer-auth) {
    position: fixed;
    z-index: 20;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    /* Kolom dibuat otomatis, bukan tetap lima: saat satu menu disembunyikan
       dari akun kader, sisanya tetap rata tanpa menyisakan sel kosong. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
    border: 0;
    border-top: 1px solid #e5ebf0;
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 -8px 26px #102b490b;
    backdrop-filter: blur(18px);
  }

  /* Menu sekunder disembunyikan dari bar dan dipindahkan ke sheet "Lainnya". */
  nav .nav-extra {
    display: none;
  }

  /* Pil "Masuk" tidak relevan di bar bawah ponsel: bentuknya disamakan saja. */
  nav .nav-masuk {
    border: 0;
    border-radius: 10px;
  }

  nav a,
  .nav-more {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 50px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    border-radius: 10px;
    padding: 4px 2px;
    background: none;
    color: #69788a;
    font: inherit;
    font-size: .66rem;
    font-weight: 650;
    line-height: 1.2;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  nav a:active,
  nav a:hover,
  .nav-more:active,
  .nav-more:hover {
    background: #f0f5f8;
    color: var(--navy);
  }

  .nav-icon {
    display: block;
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    transition: transform .2s ease;
  }

  .nav-more.is-open .nav-icon {
    transform: rotate(90deg);
  }

  .nav-more.is-open::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 16px;
    height: 3px;
    border-radius: 99px;
    background: var(--navy);
    transform: translateX(-50%);
  }

  /* Sheet terbuka di atas bar navigasi supaya bar tetap bisa dipakai. */
  .nav-sheet-panel {
    right: 0;
    bottom: calc(var(--bar-reserve) - 10px + env(safe-area-inset-bottom));
    left: 0;
    max-height: min(58dvh, 420px);
    border-radius: 20px 20px 4px 4px;
  }

  .hero {
    min-height: 0;
    display: block;
    padding: 38px 22px 40px;
  }

  .hero-copy {
    max-width: 560px;
  }

  .hero-copy .eyebrow {
    font-size: .59rem;
    letter-spacing: .1em;
  }

  .hero h1 {
    margin: 12px 0 15px;
    font-size: clamp(2rem, 8vw, 2.8rem);
    letter-spacing: -.04em;
  }

  .hero-copy > p:not(.eyebrow) {
    font-size: .95rem;
    line-height: 1.65;
  }

  .hero-mark {
    display: none;
  }

  .button {
    min-height: 46px;
    border-radius: 11px;
  }

  .stats {
    display: flex;
    width: 100%;
    max-width: none;
    gap: 0;
    overflow-x: auto;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 13px 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .stats::-webkit-scrollbar {
    display: none;
  }

  .stats div {
    min-width: 145px;
    flex: 1 0 145px;
    scroll-snap-align: start;
  }

  .stats div + div {
    border-top: 0;
    border-left: 1px solid var(--line);
    padding: 0 8px;
  }

  .stats strong {
    font-size: .86rem;
  }

  .stats span {
    font-size: .7rem;
  }

  .section {
    padding: 48px 20px;
  }

  .section-heading {
    gap: 10px;
    margin-bottom: 20px;
  }

  .section-heading h2,
  .about-section h2,
  .greeting-copy h2 {
    font-size: clamp(1.55rem, 6vw, 2rem);
  }

  .article-grid,
  .gallery-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .article-card {
    border-radius: 11px;
  }

  .article-cover {
    height: 205px;
  }

  .article-body {
    padding: 17px;
  }

  .greeting-section {
    gap: 20px;
    padding: 42px 20px;
  }

  .greeting-photo img {
    width: min(240px, 62vw);
    border: 1px solid #d8e6f2;
  }

  .greeting-copy {
    border-top: 1px solid #cbdce8;
    padding-top: 18px;
  }

  .greeting-text {
    font-size: .95rem;
    line-height: 1.75;
  }

  .about-section {
    gap: 12px;
  }

  .gallery-item img {
    height: 230px;
  }

  footer {
    padding: 25px 20px calc(24px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 380px) {
  .site-header {
    padding-right: 12px;
    padding-left: 12px;
  }

  .install-app {
    padding: 0 9px;
    font-size: .7rem;
  }
}

/* PII Global View — an embedded globe page, not a separate product. */
body.peta-page {
  display: flex;
  height: 100dvh;
  flex-direction: column;
  overflow: hidden;
}

.globe-shell {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  background: #06121c;
}

.globe-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding: 11px clamp(16px, 4vw, 56px);
  border-bottom: 1px solid rgb(255 255 255 / 12%);
  background: linear-gradient(110deg, #0b2138, #103b60);
  color: #eaf5ff;
}

.globe-toolbar-title {
  min-width: 0;
}

.globe-toolbar b {
  display: block;
  font-size: 1rem;
  letter-spacing: .02em;
}

.globe-toolbar span {
  display: block;
  margin-top: 3px;
  font-size: .78rem;
  color: #a8c6dd;
  line-height: 1.4;
}

.globe-toolbar-title a {
  color: #cfe6f8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.globe-toolbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.globe-icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 13px;
  background: rgb(255 255 255 / 7%);
  color: #fff;
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}

.globe-icon-btn:hover {
  transform: translateY(-1px);
  background: rgb(255 255 255 / 16%);
}

.globe-stage {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgb(33 96 138 / 18%), transparent 58%),
    #06121c;
}

.globe-frame {
  display: block;
  min-height: 0;
  flex: 1;
  width: 100%;
  border: 0;
  background: #06121c;
}

.globe-fallback {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  overflow: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  background: rgb(6 18 28 / 97%);
  color: #eaf5ff;
  text-align: center;
}

.globe-fallback[hidden] {
  display: none;
}

.globe-fallback b {
  font-size: 1.05rem;
}

.globe-fallback p {
  max-width: 42ch;
  margin: 0;
  color: #a8c6dd;
  font-size: .88rem;
  line-height: 1.6;
}

.globe-fallback-icon {
  width: 46px;
  height: 46px;
  fill: none;
  stroke: #4f9fd4;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.globe-fallback-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.globe-fallback-actions button,
.globe-fallback-actions a {
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 999px;
  padding: 9px 18px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: .85rem;
  text-decoration: none;
  cursor: pointer;
}

.globe-fallback-actions button {
  border-color: #4f9fd4;
  background: #176da8;
}

.globe-fallback-actions button:hover {
  background: #1d82c9;
}

.phone-gate-hint {
  margin-top: 4px;
  color: #7fa6c4;
  font-size: .74rem;
}

/* One-tap orientation card, floating above the globe instead of stealing height. */
.globe-help {
  position: fixed;
  inset: auto 14px calc(14px + env(safe-area-inset-bottom));
  z-index: 55;
  max-width: 460px;
  margin-inline: auto;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 14px;
  padding: 16px 18px;
  background: rgb(6 18 28 / 92%);
  color: #eaf5ff;
  box-shadow: 0 18px 44px rgb(0 0 0 / 45%);
}

.globe-help[hidden] {
  display: none;
}

.globe-help b {
  display: block;
  margin-bottom: 8px;
  font-size: .92rem;
}

.globe-help ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.globe-help li {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 8px;
  color: #c8ddf0;
  font-size: .82rem;
  line-height: 1.55;
}

.globe-help li span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #176da8;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
}

.globe-help button {
  margin-top: 12px;
  border: 0;
  border-radius: 999px;
  padding: 8px 18px;
  background: #176da8;
  color: #fff;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}

.globe-help button:hover {
  background: #1d82c9;
}

@media (max-width: 680px) {
  body.peta-page {
    padding-bottom: 0;
  }

  .globe-shell {
    padding-bottom: calc(var(--bar-reserve) + env(safe-area-inset-bottom));
  }

  .globe-toolbar span {
    display: none;
  }

  .globe-toolbar {
    min-height: 58px;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 8px 14px;
  }

  .globe-toolbar b {
    font-size: .9rem;
  }

  .globe-icon-btn {
    width: 38px;
    height: 38px;
  }
}

/* Compact stage: on a short or narrow window the globe stacks its panels in
   flow. The frame gets exactly the height that fits between the site header,
   the toolbar, and the bottom tab bar, so nothing inside the globe ends up
   underneath the fixed bars and the page itself does not need to scroll. */
body.peta-page.globe-compact {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}

@media (max-width: 680px) {
  /* Pita tab bawah tetap dipegang padding, bukan menimpa isi globe. */
  body.peta-page.globe-compact {
    padding-bottom: calc(var(--bar-reserve) + env(safe-area-inset-bottom));
  }
}

body.peta-page.globe-compact .globe-shell {
  min-height: calc(100dvh - 62px - 76px - env(safe-area-inset-bottom));
  padding-bottom: 0;
}

body.peta-page.globe-compact .globe-toolbar {
  position: sticky;
  top: 62px;
  z-index: 19;
  padding: 6px max(3vw, 12px);
}

body.peta-page.globe-compact .globe-stage {
  flex: none;
}

body.peta-page.globe-compact .globe-frame {
  flex: none;
  /* 62 header + ±56 toolbar + 76 tab bawah: iframe pas di sela ketiganya. */
  height: max(430px, calc(100dvh - 200px - env(safe-area-inset-bottom)));
}

@media (max-width: 680px) {
  .globe-help {
    inset: auto 12px calc(88px + env(safe-area-inset-bottom));
  }

  .globe-fallback {
    padding: 28px 22px calc(96px + env(safe-area-inset-bottom));
  }
}

/* Live data strip fed by the same proxies the globe uses. */
.data-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.data-stat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  background: #fff;
}

.data-stat strong {
  display: block;
  color: var(--navy);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.data-stat span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: .8rem;
}

.data-stat.is-muted strong {
  color: #9aa8b7;
}

.data-strip-note {
  margin-top: 14px;
  color: var(--muted);
  font-size: .8rem;
}

@media (max-width: 900px) {
  .data-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .data-strip {
    grid-template-columns: 1fr;
  }
}

/* Ruang Ibadah — jadwal sholat, adzan, kiblat, and the Qur'an reader. */
.ibadah-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(46px, 6vw, 76px) max(7vw, 24px);
  background:
    radial-gradient(ellipse at 84% 18%, rgb(46 145 204 / 26%), transparent 38%),
    linear-gradient(118deg, #102b49 0%, #12446c 70%, #176da8 100%);
  color: #fff;
}

.ibadah-hero h1 {
  max-width: 720px;
  margin: 10px 0 16px;
  font-size: clamp(2rem, 4vw, 3.1rem);
  letter-spacing: -.04em;
}

.ibadah-hero-copy > p:not(.eyebrow) {
  max-width: 620px;
  margin-bottom: 22px;
  color: #d8e9f7;
  font-size: 1rem;
}

.ibadah-hero .eyebrow {
  color: #a8d9ff;
}

.ibadah-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 999px;
  padding: 6px 13px;
  background: rgb(255 255 255 / 10%);
  color: #eaf5ff;
  font-size: .78rem;
  font-weight: 600;
}

.pill-ghost {
  background: transparent;
}

.qibla-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin: 20px 0 12px;
}
/* Homepage teaser: the same prayer data, one screen wide. */
.ibadah-teaser {
  background: linear-gradient(180deg, #f7fafc, #fff);
}

.teaser-card {
  display: grid;
  grid-template-columns: minmax(210px, .55fr) minmax(0, 1.45fr);
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: #fff;
}

.teaser-next {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 12px;
  padding: 16px 18px;
  background: linear-gradient(150deg, #102b49, #15578a);
  color: #fff;
}

.teaser-next span {
  color: #a8d9ff;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.teaser-next b {
  font-size: 1.2rem;
}

.teaser-next strong {
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.teaser-next small {
  color: #cfe5f7;
  font-size: .76rem;
}

.teaser-times {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.teaser-times li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 12px;
}

.teaser-times span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.teaser-times strong {
  color: var(--navy);
  font-size: 1.08rem;
  font-variant-numeric: tabular-nums;
}

.teaser-times li.is-next {
  border-color: #102b49;
  background: #f4f8fb;
}

@media (max-width: 900px) {
  .ibadah-hero,
  .qibla-section {
    grid-template-columns: minmax(0, 1fr);
  }

  .teaser-card {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .ibadah-hero {
    padding: 36px 20px 40px;
  }

  .ibadah-hero h1 {
    font-size: clamp(1.9rem, 8vw, 2.5rem);
  }

  .teaser-times {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------- app shell
   Rules that make the installed web app behave like a native app on phones:
   no tap flash, no rubber-band on the shell, thumb-sized targets and a
   highlighted current page in the bottom bar. */

.location-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  background: #f8fafc;
}

.location-pin {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px #176da814;
}

.location-note {
  flex: 1 1 240px;
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.5;
}

.location-note[data-tone='auto'] {
  color: #14603a;
}

.location-note[data-tone='busy'] {
  color: var(--blue);
}

.location-note[data-tone='manual'] {
  color: var(--navy);
}

.location-detect {
  min-height: 36px;
  border: 1px solid #cfe0ee;
  border-radius: 999px;
  padding: 8px 14px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: .76rem;
  font-weight: 750;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.location-detect:hover {
  border-color: #a7c3da;
  background: #f5f9fc;
}

.location-detect:disabled {
  opacity: .6;
  cursor: progress;
}

@media (max-width: 680px) {
  .location-detect {
    width: 100%;
    min-height: 42px;
  }
}

body {
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

a,
button,
summary,
label,
.tab,
nav a {
  touch-action: manipulation;
}

.button,
.install-app,
.ib-adzan-play,
.reader-pager button,
.ayah-play,
.city-results button,
.surah-item {
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.button:active,
.install-app:active,
.reader-pager button:active,
.ayah-play:active,
.surah-item:active {
  transform: scale(.975);
}

.site-header {
  padding-top: max(10px, env(safe-area-inset-top));
}

.hero,
.ibadah-hero {
  scroll-margin-top: 0;
}

.surah-list,
.city-results,
.ib-rows {
  -webkit-overflow-scrolling: touch;
}

nav a[aria-current='page'] {
  color: var(--navy);
  font-weight: 800;
}

nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  transform: translateX(-50%);
}

.is-standalone .install-app {
  display: none;
}

.is-standalone .site-header {
  padding-top: max(6px, env(safe-area-inset-top));
}

.is-standalone nav {
  padding-bottom: max(7px, env(safe-area-inset-bottom));
}

@media (max-width: 680px) {
  /* 16px keeps iOS from zooming the viewport when a field gets focus. */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  nav a {
    min-height: 52px;
    gap: 4px;
    font-size: .68rem;
    transition: color .16s ease, background-color .16s ease;
  }

  nav a:active {
    background: #e9f1f8;
    transform: scale(.94);
  }

  nav a[aria-current='page']::after {
    bottom: 3px;
    width: 16px;
    height: 3px;
    border-radius: 99px;
    background: currentColor;
  }

  .site-header {
    padding-top: max(7px, env(safe-area-inset-top));
  }

  main {
    /* `backwards`, bukan `both`: nilai akhir animasi transform meninggalkan
       matriks identitas pada <main>, dan itu membuat posisi fixed anak
       mengunci ke tinggi halaman alih-alih layar. */
    animation: shell-enter .32s ease backwards;
  }

  .ibadah-hero,
  .section,
  .teaser,
  .qibla-section {
    /* Penyangga bar sudah ditanggung body (--bar-reserve); di sini hanya sisa
       napas kecil supaya teks terakhir tidak lengket ke batas bawah. */
    padding-bottom: calc(8px + env(safe-area-inset-bottom) / 2);
  }
}

@keyframes shell-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@media (prefers-reduced-motion: reduce) {
  main,
  .tanya-intro,
  .tanya-row,
  .tanya-intro img,
  .tanya-orbit,
  .tanya-skeleton i,
  .tanya-dots i,
  .tanya-row.is-pending .tanya-avatar,
  .reveal {
    animation: none;
  }
}

/* ------------------------------------------------------------------- animasi
   Kelas .reveal hanya dipasang lewat JavaScript, jadi halaman tetap tampil
   penuh ketika skrip mati atau peramban lama dipakai. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

.scroll-progress {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  height: 3px;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--blue), var(--green));
  transition: width .12s linear;
}

.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #eef3f8;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 70%) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .skeleton::after {
    animation: none;
  }
}

/* --------------------------------------------------------- Acara & Kegiatan
   Halaman feed: filter chips, kartu acara, dan dua kartu panduan pengurus.
   Semua target sentuh minimal 40px dan huruf terkecil 0,7rem (≈11,2px). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.acara-hero {
  grid-template-columns: minmax(0, 1fr);
}

.acara-board {
  padding-bottom: clamp(44px, 5vw, 68px);
}

.acara-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}

.acara-feed-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 780px;
  margin: 0 auto 12px;
}

.acara-feed-status p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
}

.acara-feed-status button {
  min-height: 44px;
  border: 0;
  padding: 8px 10px;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}

.acara-feed-status button[hidden] {
  display: none;
}

.acara-chips {
  display: flex;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  background: var(--soft);
}

.acara-chips button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0 17px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.acara-chips button:hover {
  color: var(--navy);
}

.acara-chips button.is-active {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 4px 14px #102b4918;
}

.acara-search,
.acara-level {
  display: flex;
  align-items: center;
}

.acara-search input,
.acara-level select {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 14px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
}

.acara-search input {
  width: min(320px, 100%);
}

.acara-level select {
  min-width: 172px;
}

.acara-search input:focus-visible,
.acara-level select:focus-visible {
  outline: 2px solid #79bfff;
  outline-offset: 1px;
  border-color: var(--blue);
}

.acara-skeleton {
  display: grid;
  gap: 14px;
}

.acara-skeleton .skeleton {
  height: 118px;
}

.acara-list {
  display: grid;
  grid-template-columns: minmax(0, 780px);
  justify-content: center;
  gap: 20px;
}

.acara-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 5px 20px #102b4908;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.acara-card:hover {
  transform: translateY(-4px);
  border-color: #c3d5e6;
  box-shadow: 0 16px 38px #102b491a;
}

.acara-card.is-past {
  background: #fcfdfe;
}

.acara-cover {
  position: relative;
  display: block;
  height: 176px;
  overflow: hidden;
  background: var(--sky);
}

.acara-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.acara-card:hover .acara-cover img {
  transform: scale(1.045);
}

.acara-date {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  min-width: 54px;
  border-radius: 13px;
  padding: 6px 9px;
  background: rgb(255 255 255 / 94%);
  color: var(--navy);
  box-shadow: 0 8px 20px #061b3326;
  line-height: 1.1;
}

.acara-date b {
  font-size: 1.32rem;
  letter-spacing: -.02em;
}

.acara-date small {
  color: var(--blue);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.acara-tag-lampau {
  position: absolute;
  right: 12px;
  bottom: 12px;
  border-radius: 999px;
  padding: 5px 11px;
  background: rgb(16 43 73 / 78%);
  color: #eaf5ff;
  font-size: .7rem;
  font-weight: 700;
}

.acara-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 7px;
  padding: 19px 20px 21px;
}

.acara-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.acara-author-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d6e2ee;
  border-radius: 50%;
  background: linear-gradient(145deg, #f1f7fc, #e1edf7);
  color: var(--navy);
  font-size: .92rem;
  font-weight: 800;
}

.acara-author > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.acara-author b {
  overflow: hidden;
  color: var(--navy);
  font-size: .86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acara-author small {
  color: var(--muted);
  font-size: .72rem;
}

.acara-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.acara-meta > span:first-child {
  color: var(--blue);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.acara-jenjang {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  background: var(--soft);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
}

.acara-body h3 {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: 1.12rem;
  letter-spacing: -.02em;
}

.acara-when,
.acara-where,
.acara-desc {
  margin: 0;
  font-size: .86rem;
}

.acara-when {
  color: var(--ink);
  font-weight: 650;
}

.acara-where {
  color: var(--muted);
}

.acara-desc {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: #3d4d60;
}

.acara-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: auto;
  padding-top: 12px;
}

.acara-cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  padding: 10px 18px;
  font-size: .88rem;
}

.acara-actions small {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 650;
}

.acara-nofom {
  border: 1px dashed #c9d7e4;
  border-radius: 10px;
  padding: 9px 13px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 650;
}

.acara-calendar {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}

.acara-calendar:hover {
  border-color: #b9cfe4;
  background: var(--soft);
}

.acara-more {
  margin: 18px 0 0;
  font-size: .82rem;
}

.acara-load-more {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 16px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: .86rem;
  font-weight: 750;
  cursor: pointer;
}

.acara-load-more span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
}

.acara-more[hidden] {
  display: none;
}

.acara-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding-top: clamp(24px, 3vw, 40px);
}

.guide-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 34px);
  background: linear-gradient(168deg, #f7fbff, #fff 62%);
}

.guide-card h2 {
  margin-bottom: 10px;
  color: var(--navy);
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
}

.guide-card p {
  color: #3d4d60;
  font-size: .92rem;
}

.guide-steps {
  display: grid;
  gap: 10px;
  margin: 18px 0 20px;
  padding: 0;
  list-style: none;
}

.guide-steps > div {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px 14px;
  background: #fff;
}

.guide-steps b {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--navy);
  color: #fff;
  font-size: .82rem;
}

.guide-steps span {
  color: #3d4d60;
  font-size: .87rem;
}

/* ---- interaksi acara: suka, komentar, bagikan ---- */

.acara-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.acara-social button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 13px;
  background: #fff;
  color: #46586d;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s, transform .18s;
}

.acara-social button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.acara-social button:hover {
  border-color: #c9d8e7;
  color: var(--navy);
}

.acara-social button:disabled {
  opacity: .55;
  cursor: wait;
}

.acara-like span {
  font-variant-numeric: tabular-nums;
}

.acara-like.is-on {
  border-color: #f0c6cf;
  background: #fff2f5;
  color: #b5274a;
}

.acara-like.is-on svg {
  fill: #d3355f;
  stroke: #d3355f;
}

.acara-like.is-pop {
  transform: scale(1.08);
}

.acara-talk[aria-expanded="true"] {
  border-color: #b9cfe4;
  background: var(--soft);
  color: var(--navy);
}

.acara-share.is-done {
  border-color: #bfe0c6;
  color: #1c6b34;
}

.acara-toast {
  flex: 1 1 100%;
  border-radius: 10px;
  padding: 8px 11px;
  background: #fff2f2;
  color: #a51e27;
  font-size: .76rem;
  font-weight: 600;
}

.acara-thread {
  margin-top: 14px;
  border-top: 1px dashed var(--line);
  padding-top: 12px;
  animation: thread-open .26s ease backwards;
}

.acara-thread[hidden] {
  display: none;
}

@keyframes thread-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.acara-thread-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 10px;
}

.acara-thread-head b {
  color: var(--navy);
  font-size: .84rem;
}

.acara-thread-head span {
  color: var(--muted);
  font-size: .72rem;
}

.acara-comments {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.acara-comment {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.acara-comment > div {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 12px;
  background: #fff;
}

.acara-comment.is-mine > div {
  border-color: #c3d8ec;
  background: #f3f8fd;
}

.acara-comment b {
  display: block;
  color: var(--navy);
  font-size: .78rem;
}

.acara-comment b small {
  margin-left: 5px;
  border-radius: 6px;
  background: #e3f0fb;
  color: #1a5f96;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 1px 5px;
  text-transform: uppercase;
}

.acara-comment p {
  margin: 3px 0 2px;
  color: #33465c;
  font-size: .84rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.acara-comment small {
  color: var(--muted);
  font-size: .68rem;
}

.acara-ava {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--navy);
  font-size: .82rem;
  font-weight: 800;
}

.acara-ava img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acara-empty {
  color: var(--muted);
  font-size: .8rem;
  list-style: none;
}

.acara-composer textarea {
  width: 100%;
  min-height: 62px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
  resize: vertical;
}

.acara-composer textarea:focus-visible {
  outline: 2px solid #79bfff;
  outline-offset: 1px;
}

.composer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 9px;
}

.composer-note {
  flex: 1 1 220px;
  margin: 0;
  color: #a51e27;
  font-size: .74rem;
  font-weight: 600;
}

.composer-note.is-ok {
  color: #17642c;
}

.acara-send {
  min-height: 44px;
  font-size: .82rem;
}

/* ---- chip akun & panel masuk kader ---- */

.account-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.account-slot .account-button,
.nav-sheet-grid .account-slot .account-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px 0 6px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

.account-slot .account-button:hover {
  border-color: #b9cfe4;
}

.account-label {
  white-space: nowrap;
}

.account-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--navy);
  font-size: .78rem;
  font-weight: 800;
  object-fit: cover;
}

.account-avatar svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.account-name {
  position: relative;
  border: 0;
  background: none;
  color: var(--navy);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tanpa menggeser kop, area sentuh nama akun dilebarkan sampai target 44px. */
.account-name::after {
  content: "";
  position: absolute;
  inset: -10px -7px;
}

.account-signout {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  background: #fff;
  color: #a51e27;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  box-shadow: 0 12px 26px #102b4914;
  cursor: pointer;
}

.account-slot.is-open .account-signout {
  display: block;
}

.account-signout[hidden] {
  display: none;
}

/* Menu kecil di bawah nama akun: profil sendiri dan keluar. */
.account-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 176px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 26px #102b4914;
}

.account-slot.is-open .account-menu {
  display: flex;
}

.account-menu-item {
  border: 0;
  background: none;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--navy);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
  background: #eef3fa;
}

.account-menu .account-signout {
  position: static;
  display: block;
  right: auto;
  top: auto;
  border: 0;
  border-radius: 9px;
  background: none;
  box-shadow: none;
  padding: 8px 10px;
  color: #a51e27;
}

.account-menu .account-signout:hover {
  background: #fbeef0;
}

[data-requires].is-locked {
  display: none !important;
}

/* ---------- Pustaka organisasi: tautan khusus yang sudah masuk ----------
   akun.js memakai data-requires untuk menutup tautan pengurus dari akun kader,
   sedangkan Pustaka justru hanya terbuka bagi yang punya sesi. Kelas `ada-sesi`
   pada <body> (diisi tiap halaman) membalik hasilnya: tertutup untuk tamu,
   terbuka begitu ada sesi akun. */
[data-requires='kader'] {
  display: none !important;
}

body.ada-sesi [data-requires='kader'] {
  display: flex !important;
}

@media (max-width: 680px) {
  /* Bar bawah ponsel sudah penuh oleh menu utama, jadi Pustaka tetap lewat
     sheet "Lainnya" seperti menu sekunder lainnya. */
  body.ada-sesi nav .nav-extra[data-requires='kader'] {
    display: none !important;
  }
}

.kader-dialog {
  width: min(430px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  border: 0;
  border-radius: 20px;
  padding: 0;
  background: none;
}

.kader-dialog::backdrop {
  background: #061524b8;
  backdrop-filter: blur(3px);
}

.kader-card {
  display: grid;
  gap: 10px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 24px 22px;
  background: #fff;
  box-shadow: 0 30px 70px #06152440;
  text-align: center;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.kader-card h2 {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: 1.16rem;
}

.kader-card p {
  margin: 0;
  color: #46586d;
  font-size: .84rem;
  line-height: 1.55;
}

.kader-mark {
  width: 46px;
  height: 54px;
  margin: 0 auto;
  object-fit: contain;
}

.kader-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--soft);
  color: var(--navy);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
}

.kader-google {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 46px;
  margin-top: 6px;
}

.kader-hint {
  color: var(--muted);
  font-size: .78rem;
}

.kader-notice {
  color: #a51e27;
  font-size: .76rem;
  font-weight: 600;
}

.kader-notice[hidden] {
  display: none;
}

.kader-fine {
  color: var(--muted);
  font-size: .7rem;
}

.kader-lead {
  color: #46586d;
  font-size: .82rem;
}

.kader-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 4px;
  margin-top: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--soft);
}

.kader-tab {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  padding: 8px 6px;
  background: none;
  color: #46586d;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.kader-tab.is-active {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 2px 8px rgb(16 43 73 / 12%);
}

.kader-form {
  display: grid;
  gap: 10px;
  margin-top: 2px;
  text-align: left;
}

.kader-field {
  display: grid;
  gap: 5px;
}

.kader-field > span:first-child {
  color: var(--navy);
  font-size: .75rem;
  font-weight: 800;
}

.kader-field input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fbfdff;
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
}

.kader-field input:focus-visible {
  border-color: var(--blue);
  outline: 2px solid rgb(23 109 168 / 32%);
  outline-offset: 1px;
}

.kader-pass {
  position: relative;
  display: flex;
}

.kader-pass input {
  padding-right: 82px;
}

.kader-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 9px;
  padding: 9px 10px;
  background: var(--soft);
  color: var(--blue);
  font: inherit;
  font-size: .74rem;
  font-weight: 800;
  cursor: pointer;
}

.kader-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 2px;
  border: 0;
  border-radius: 13px;
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: #fff;
  font: inherit;
  font-size: .95rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 22px rgb(16 43 73 / 22%);
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.kader-go:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgb(16 43 73 / 26%);
}

.kader-go:active {
  transform: translateY(0) scale(.99);
}

.kader-go:disabled {
  opacity: .62;
  cursor: progress;
  transform: none;
}

.kader-alt {
  color: var(--muted);
  font-size: .78rem;
}

.kader-link {
  border: 0;
  padding: 8px 2px;
  background: none;
  color: var(--blue);
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
}

.kader-captcha {
  margin-top: 2px;
}

body.has-kader-dialog {
  overflow: hidden;
}

/* Panel masuk jadi lembar bawah di ponsel: lebih dekat ke ibu jari. */
@media (max-width: 680px) {
  .kader-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: calc(100dvh - var(--kader-keyboard, 0px));
    margin: auto 0 var(--kader-keyboard, 0px);
    border-radius: 22px 22px 0 0;
    padding: 0;
  }

  .kader-dialog[open] .kader-card {
    animation: kader-sheet-in .24s ease backwards;
  }

  .kader-card {
    /* Batasnya mengikuti tinggi dialog: kalau tidak, tombol kirim terdorong
       keluar layar dan tak bisa disentuh. */
    max-height: calc(100dvh - 24px - var(--kader-keyboard, 0px));
    gap: 8px;
    padding: 18px 18px calc(14px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 48px #06152440;
    text-align: left;
  }

  /* Tombol kirim menempel di dasar lembar supaya tetap bisa ditekan tanpa
     menggulir, meski formulir pendaftaran lebih tinggi dari layar. */
  .kader-go {
    position: sticky;
    bottom: 0;
    z-index: 2;
  }

  .kader-mark {
    width: 44px;
    height: 44px;
    margin: 0;
  }

  .kader-tabs {
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    gap: 6px;
  }

  .kader-lead,
  .kader-hint,
  .kader-fine {
    font-size: .78rem;
  }

  .kader-tab,
  .kader-go,
  .kader-eye,
  .kader-link {
    min-height: 44px;
  }

  /* iOS berhenti memperbesar halaman saat kolom diisi bila teksnya 16px. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px;
  }
}

@keyframes kader-sheet-in {
  from {
    transform: translateY(26px);
    opacity: .6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kader-dialog[open] .kader-card {
    animation: none;
  }
}

@media (max-width: 900px) {
  .acara-list {
    grid-template-columns: minmax(0, 780px);
    justify-content: center;
  }
}

@media (max-width: 680px) {
  .acara-filters {
    gap: 10px;
  }

  .acara-chips {
    width: 100%;
  }

  .acara-chips button {
    flex: 1;
    padding: 0 10px;
    font-size: .8rem;
  }

  .acara-search {
    flex: 1 1 100%;
  }

  .acara-search input {
    width: 100%;
  }

  .acara-level {
    flex: 1 1 100%;
  }

  .acara-level select {
    width: 100%;
    min-width: 0;
  }

  .acara-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .acara-cover {
    height: 196px;
  }

  .acara-guide {
    grid-template-columns: 1fr;
  }
}

/* ---------- Tanya PII: asisten AI ---------- */

/* Halaman penuh ala aplikasi chat: satu kolom baca, komposer menempel di bawah.
   --tanya-keyboard diisi tinggi papan ketik dari visualViewport (iOS). */
.tanya-page {
  display: flex;
  height: calc(100dvh - var(--tanya-keyboard, 0px));
  /* min-height: 100dvh yang berlaku untuk <body> di seluruh situs akan
     mengalahkan tinggi ini bila tidak dinetralkan — papan ketik lalu menutupi
     kolom tulis karena halaman tidak pernah menyusut. */
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.tanya-page > main {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

/* Area baca nyaris putih: satu sapuan biru lembut di tepi atas, bukan dua
   cahaya radial yang berebut perhatian dengan percakapan. */
.tanya-stage {
  background: linear-gradient(180deg, #f4f9fd, #fdfefe 240px);
}

.tanya-scroll {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding: 18px 20px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.tanya-intro,
.tanya-thread {
  width: min(760px, 100%);
  margin: 0 auto;
}

.tanya-intro[hidden] {
  display: none;
}

.tanya-intro {
  position: relative;
  /* margin auto menaruh hero di tengah kolom kosong; begitu ada jawaban,
     aturan [hidden] menghapusnya sehingga tidak pernah mendorong isi keluar. */
  margin: auto;
  padding: clamp(18px, 6vh, 56px) 0 10px;
  animation: shell-enter .4s ease both;
}

/* Cahaya lembut di belakang logo supaya layar pertama terasa seperti aplikasi AI. */
.tanya-intro::before {
  position: absolute;
  top: 2px;
  left: -26px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(23 109 168 / 15%), transparent 66%);
  pointer-events: none;
  animation: hero-glow 6s ease-in-out infinite;
}

.tanya-intro img {
  position: relative;
  width: 66px;
  height: 66px;
  object-fit: contain;
  border-radius: 20px;
  padding: 9px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(16 43 73 / 16%);
  animation: logo-float 7s ease-in-out infinite;
}

.tanya-intro > .tanya-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 10px;
  border: 1px solid #dbe8f4;
  border-radius: 999px;
  padding: 4px 11px;
  background: #f2f8fd;
  color: #4a6b8c;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.tanya-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2fa871;
  box-shadow: 0 0 0 3px rgb(47 168 113 / 18%);
  animation: badge-pulse 2.4s ease-in-out infinite;
}

@keyframes hero-glow {
  0%, 100% { opacity: .65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.07); }
}

@keyframes badge-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

.tanya-intro h1 {
  margin: 14px 0 6px;
  color: var(--navy);
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  letter-spacing: -.035em;
}

.tanya-intro > p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.6;
}

.tanya-thread {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 10px;
}

.tanya-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: bubble-in .28s cubic-bezier(.22, 1, .36, 1) both;
}

.tanya-row.is-user {
  flex-direction: row-reverse;
}

.tanya-body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.tanya-row.is-user .tanya-body {
  align-items: flex-end;
  flex: 1 1 auto;
}

.tanya-avatar {
  flex: 0 0 auto;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #e3ecf6;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgb(16 43 73 / 9%);
  color: #5d6f83;
  font-size: .72rem;
  font-weight: 800;
  overflow: hidden;
}

.tanya-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}

/*
 * Like the AI apps people already know: the assistant writes straight onto the
 * page and only the reader's own question wears a bubble.
 */
.tanya-msg {
  min-width: 0;
  max-width: 100%;
  color: var(--ink);
  font-size: .965rem;
  line-height: 1.72;
}

.tanya-row.is-assistant .tanya-msg {
  padding-top: 3px;
}

.tanya-row.is-user .tanya-msg {
  width: fit-content;
  max-width: min(560px, 100%);
  border: 0;
  border-radius: 18px;
  border-bottom-right-radius: 7px;
  padding: 10px 15px;
  background: linear-gradient(135deg, var(--blue), #0f4f7d);
  color: #fff;
  box-shadow: 0 8px 22px rgb(23 109 168 / 22%);
  font-size: .94rem;
  line-height: 1.6;
}

.tanya-msg p {
  margin: 0 0 9px;
}

.tanya-msg p:last-child {
  margin-bottom: 0;
}

.tanya-msg ul,
.tanya-msg ol {
  margin: 0 0 10px;
  padding-left: 22px;
}

.tanya-msg li {
  margin: 3px 0;
}

.tanya-msg li::marker {
  color: var(--blue);
  font-weight: 700;
}

.tanya-msg a {
  color: var(--blue);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tanya-msg blockquote,
.tanya-kutipan {
  margin: 0 0 11px;
  border-left: 3px solid #bcd8ef;
  border-radius: 0 11px 11px 0;
  padding: 7px 12px 7px 13px;
  background: #f4f9fd;
  color: #3c566f;
}

.tanya-kutipan > :last-child {
  margin-bottom: 0;
}

.tanya-msg hr,
.tanya-garis {
  margin: 15px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/*
 * ------------------------------------------------------------- isi jawaban
 * Kelas di bawah ini datang dari markdown.js dan dipakai ulang oleh lembar
 * cetak PDF, jadi aturannya tidak boleh bergantung pada gelembung chat.
 */
.tanya-tulis {
  min-width: 0;
}

.tanya-para {
  margin: 0 0 10px;
}

.tanya-tulis > .tanya-para:last-child,
.tanya-tulis > :last-child {
  margin-bottom: 0;
}

/* Judul # … ###### dipetakan ke h2 … h6 agar tidak menyaingi judul halaman. */
.tanya-h {
  margin: 19px 0 8px;
  color: var(--navy);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: 1.36;
  break-after: avoid;
  page-break-after: avoid;
}

.tanya-h:first-child {
  margin-top: 0;
}

.tanya-h2 {
  padding-bottom: 5px;
  border-bottom: 1px solid #e0eaf5;
  font-size: 1.17rem;
}

.tanya-h3 { font-size: 1.06rem; }
.tanya-h4 { font-size: .99rem; }
.tanya-h5,
.tanya-h6 { color: #2a4a68; font-size: .95rem; }

.tanya-msg code,
.tanya-inline-kode {
  border-radius: 6px;
  padding: 1px 6px;
  background: #eef3f9;
  color: #12324f;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .85em;
  overflow-wrap: anywhere;
}

.tanya-daf {
  margin: 0 0 11px;
  padding-left: 23px;
}

.tanya-daf.is-cek {
  padding-left: 3px;
  list-style: none;
}

.tanya-butir {
  margin: 5px 0;
}

.tanya-butir > .tanya-para {
  margin-bottom: 4px;
}

/* Butir kotak centang: kotak di kiri, teksnya tidak boleh menempel. */
.tanya-butir.is-cek {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.tanya-butir.is-cek .tanya-butir-teks {
  min-width: 0;
}

.tanya-butir .tanya-daf {
  margin: 4px 0 2px;
}

.tanya-kotak {
  flex: 0 0 auto;
  display: inline-grid;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  place-items: center;
  border: 1.5px solid #b6c8da;
  border-radius: 5px;
  background: #fff;
  color: #fff;
  font-size: .66rem;
  font-weight: 900;
  line-height: 1;
}

.tanya-kotak.is-isi {
  border-color: var(--blue);
  background: var(--blue);
}

.tanya-kotak.is-isi::after {
  content: '\2713';
}

/* Tabel GFM: kepala jelas, angka rata kanan, sempit pun tetap terbaca. */
.tanya-tabel-lapit {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 13px 0;
  border: 1px solid #d8e4f0;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 6px 16px rgb(16 43 73 / 5%);
}

.tanya-tabel-lapit:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.tanya-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  line-height: 1.55;
}

.tanya-tabel th,
.tanya-tabel td {
  padding: 8px 12px;
  border-bottom: 1px solid #e7eff7;
  text-align: left;
  vertical-align: top;
}

.tanya-tabel th {
  position: sticky;
  top: 0;
  background: #f0f6fc;
  color: var(--navy);
  font-weight: 800;
}

.tanya-tabel tbody tr:nth-child(even) {
  background: #fafcfe;
}

.tanya-tabel tr:last-child td {
  border-bottom: 0;
}

.tanya-tabel .is-right {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.tanya-tabel .is-center { text-align: center; }
.tanya-tabel .is-left { text-align: left; }

.tanya-tabel caption {
  caption-side: bottom;
  padding: 6px 12px;
  color: var(--muted);
  font-size: .74rem;
  text-align: left;
}

/* Blok kode: kepala bahasa + tombol, isi bernomor, boleh dilipat. */
.tanya-sorot,
.tanya-terminal {
  overflow: hidden;
  margin: 13px 0;
  border: 1px solid #17334f;
  border-radius: 14px;
  background: #0e2237;
  color: #e9f2fa;
  box-shadow: 0 10px 24px rgb(14 34 55 / 14%);
  break-inside: avoid;
  page-break-inside: avoid;
}

.tanya-sorot-kepala,
.tanya-terminal-kepala {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  border-bottom: 1px solid #1d3a58;
  background: #132c46;
  color: #bcd6ee;
  font-size: .72rem;
  font-weight: 700;
}

.tanya-sorot_bahasa {
  color: #f2f8fd;
  font-weight: 800;
  letter-spacing: .01em;
}

.tanya-sorot_meta {
  color: #7f9ab3;
  font-weight: 600;
}

.tanya-terminal_judul {
  color: #f2f8fd;
  font-weight: 800;
}

.tanya-sorot_tombol,
.tanya-terminal_tombol {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}

.tanya-ktombol {
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 8px;
  padding: 4px 9px;
  background: rgb(255 255 255 / 8%);
  color: #dce9f5;
  font: inherit;
  font-size: .69rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}

.tanya-ktombol:hover {
  background: rgb(255 255 255 / 20%);
  color: #fff;
}

.tanya-ktombol:active {
  transform: scale(.96);
}

.tanya-sorot-badan {
  position: relative;
}

.tanya-kode {
  overflow: auto;
  max-width: 100%;
  margin: 0;
  padding: 11px 13px 13px;
  background: none;
  color: #e9f2fa;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .8rem;
  line-height: 1.62;
  tab-size: 2;
}

.tanya-kode code,
.tanya-terminal code {
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  overflow-wrap: normal;
}

.tanya-kode-isi {
  display: block;
  white-space: pre;
}

.tanya-baris-kode {
  display: block;
  min-height: 1.62em;
}

/* Nomor baris dari CSS counter: tidak ikut tersalin saat blok kode disalin. */
.tanya-kode.is-nomor {
  counter-reset: baris;
}

.tanya-kode.is-nomor .tanya-baris-kode {
  position: relative;
  padding-left: 46px;
  counter-increment: baris;
}

.tanya-kode.is-nomor .tanya-baris-kode::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  color: #58789c;
  font-variant-numeric: tabular-nums;
  text-align: right;
  content: counter(baris);
  user-select: none;
  -webkit-user-select: none;
}

.tanya-kode .c-komentar { color: #7f9ab3; font-style: italic; }
.tanya-kode .c-kata { color: #8ecbff; font-weight: 600; }
.tanya-kode .c-pustaka { color: #6fd6b0; }
.tanya-kode .c-fungsi { color: #ffd479; }
.tanya-kode .c-string { color: #c8e6a1; }
.tanya-kode .c-nomor { color: #f8b26a; }
.tanya-kode .c-penanda { color: #d4a5ff; }
.tanya-kode .c-aksi { color: #9db8d2; }

.tanya-sorot.is-lipat:not(.is-terbuka) .tanya-sorot-badan {
  max-height: 340px;
  overflow: hidden;
}

.tanya-sorot.is-lipat:not(.is-terbuka) .tanya-sorot-badan::after {
  position: absolute;
  inset: auto 0 0 0;
  height: 56px;
  background: linear-gradient(180deg, rgb(14 34 55 / 0%), #0e2237 80%);
  content: '';
  pointer-events: none;
}

.tanya-sorot-bentang {
  display: block;
  width: 100%;
  border: 0;
  border-top: 1px solid #1d3a58;
  padding: 8px;
  background: #102a44;
  color: #cfe4f7;
  font: inherit;
  font-size: .74rem;
  font-weight: 800;
  cursor: pointer;
}

.tanya-sorot-bentang:hover {
  background: #163452;
  color: #fff;
}

/* Terminal: lampu jendela, baris perintah terpisah dari keluarannya. */
.tanya-terminal {
  background: #0c1c2b;
}

.tanya-terminal-kepala {
  background: #16293c;
}

.tanya-terminal_lampu {
  display: inline-flex;
  gap: 5px;
  margin-right: 2px;
}

.tanya-terminal_lampu i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4a6276;
}

.tanya-terminal_lampu i:nth-child(1) { background: #f0625f; }
.tanya-terminal_lampu i:nth-child(2) { background: #f2c260; }
.tanya-terminal_lampu i:nth-child(3) { background: #4ecb81; }

.tanya-terminal-badan {
  overflow: auto;
  max-height: 430px;
  padding: 10px 12px 12px;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .8rem;
  line-height: 1.6;
}

.tanya-term-baris {
  display: flex;
  gap: 8px;
}

.tanya-term-ps {
  flex: 0 0 auto;
  min-width: 12px;
  color: #5fd0a2;
  font-weight: 800;
  user-select: none;
  -webkit-user-select: none;
}

.tanya-term-baris.is-perintah .tanya-term-kode {
  color: #f2f8fd;
  font-weight: 600;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tanya-term-baris.is-keluaran {
  color: #a9c2d8;
}

.tanya-term-baris.is-keluaran > span {
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tanya-term-baris.is-gagal { color: #ff9d94; }
.tanya-term-baris.is-waspad { color: #f4d08a; }
.tanya-term-baris.is-beres { color: #7de2ac; }

/* Gambar, matematika, dan catatan akhir. */
.tanya-gambar {
  margin: 13px 0;
}

.tanya-gambar img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.tanya-gambar figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: .78rem;
  text-align: center;
}

.tanya-matematika {
  font-family: 'Cambria Math', 'STIX Two Math', Georgia, serif;
  font-size: 1.02em;
}

.tanya-matematika-blok {
  overflow-x: auto;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid #e2ecf6;
  border-radius: 12px;
  background: #f8fbfe;
  font-family: 'Cambria Math', 'STIX Two Math', Georgia, serif;
  font-size: 1.05rem;
  text-align: center;
}

.tanya-pecahan {
  display: inline-grid;
  vertical-align: middle;
  text-align: center;
}

.tanya-pecahan-atas {
  padding: 0 5px 1px;
  border-bottom: 1px solid currentColor;
}

.tanya-pecahan-bawah {
  padding: 1px 5px 0;
}

.tanya-pecahan.is-binom .tanya-pecahan-atas,
.tanya-pecahan.is-binom .tanya-pecahan-bawah {
  border-bottom: 0;
}

.tanya-akar {
  display: inline-block;
  padding: 0 3px;
  border-top: 1px solid currentColor;
}

.tanya-akar-tingkat {
  font-size: .62em;
}

.tanya-bar {
  display: inline-block;
  border-top: 1px solid currentColor;
  padding-top: 1px;
}

.tanya-cat a {
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
}

.tanya-rujukan {
  margin-left: 2px;
  border-radius: 6px;
  padding: 1px 5px;
  background: #eef4fb;
  color: #41647f;
  font-size: .68em;
  font-weight: 800;
}

.tanya-catat {
  margin-top: 14px;
  border-top: 1px dashed #cfdeec;
  padding-top: 9px;
}

.tanya-catat_judul {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
}

.tanya-catat-daf {
  margin: 0;
  padding-left: 20px;
  color: #45596d;
  font-size: .82rem;
}

.tanya-catat-daf li {
  margin: 3px 0;
}

/*
 * Aksi per jawaban: alat salin/unduh/PDF di kiri, penanda bantuan dan jawab
 * ulang di kanan. Tersembunyi sampai disentuh atau didekati seperti ChatGPT,
 * tetapi selalu tampil di layar tanpa kursor dan tetap bisa ditabulasi.
 */
/* Toolbar jawaban: empat tombol utility (salin, suka, tidak suka, ulang) dan
   satu tombol unduh yang hanya ada bila jawabannya memang sebuah dokumen. */
.tanya-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 2px 0 0 -7px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.tanya-actions_kanan {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

.tanya-row.is-assistant:hover .tanya-actions,
.tanya-actions:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.tanya-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  padding: 5px 8px;
  background: none;
  color: #7d8b9c;
  font: inherit;
  font-size: .73rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.tanya-act svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tanya-act:hover {
  background: #eef4fa;
  color: var(--blue);
}

.tanya-act.is-rasa {
  padding: 5px 7px;
}

.tanya-act.is-rasa.is-aktif {
  background: #e8f3ec;
  color: #1a6b43;
}

.tanya-act.is-rasa.is-aktif svg {
  fill: currentColor;
}

/* Unduhan kontekstual: satu-satunya tombol yang boleh tampak menonjol, dan
   hanya dirender bila dokumen di jawaban ini benar-benar tersusun. */
.tanya-act.is-unduh {
  border: 1px solid #cfe0f2;
  border-radius: 999px;
  padding: 5px 11px;
  background: #f2f8fd;
  color: var(--blue);
  font-weight: 800;
}

.tanya-act.is-unduh:hover {
  border-color: var(--blue);
  background: #e6f1fb;
}

@media (hover: none) {
  .tanya-actions {
    opacity: .9;
    pointer-events: auto;
  }
}

.tanya-row.is-error .tanya-msg {
  border: 1px solid #f0c9c4;
  border-radius: 14px;
  padding: 11px 14px;
  background: #fdf0ee;
  color: #8a2a20;
  font-size: .9rem;
}

.tanya-dots {
  display: inline-flex;
  gap: 4px;
}

.tanya-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  animation: dot-bounce 1.1s ease-in-out infinite;
}

.tanya-dots i:nth-child(2) { animation-delay: .16s; }
.tanya-dots i:nth-child(3) { animation-delay: .32s; }

@keyframes dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/*
 * Saat jawaban disusun: cincin biru berputar mengelilingi logo PII, logonya
 * berdenyat pelan, dan tiga garis berkilau di bawah label sebagai isyarat
 * tulisan yang akan datang.
 */
.tanya-row.is-pending .tanya-msg {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px 10px;
}

.tanya-row.is-pending .tanya-dots { grid-column: 1; }
.tanya-row.is-pending .tanya-pending-text { grid-column: 2; }
.tanya-row.is-pending .tanya-skeleton { grid-column: 1 / -1; }

.tanya-row.is-pending .tanya-avatar {
  position: relative;
  animation: avatar-breathe 1.9s ease-in-out infinite;
}

.tanya-orbit {
  position: absolute;
  inset: -4px;
  border: 2px solid rgb(23 109 168 / 14%);
  border-top-color: var(--blue);
  border-right-color: rgb(23 109 168 / 55%);
  border-radius: 50%;
  animation: orbit-spin 1s linear infinite;
}

.tanya-pending-text {
  color: var(--blue);
  font-size: .84rem;
  font-weight: 700;
}

.tanya-skeleton {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tanya-skeleton i {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e6eef7 0%, #f7fbff 40%, #e6eef7 80%);
  background-size: 260% 100%;
  animation: skeleton-wave 1.5s ease-in-out infinite;
}

.tanya-skeleton i:nth-child(1) { width: 92%; }
.tanya-skeleton i:nth-child(2) { width: 70%; animation-delay: .12s; }
.tanya-skeleton i:nth-child(3) { width: 44%; animation-delay: .24s; }

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes avatar-breathe {
  0%, 100% { box-shadow: 0 4px 14px rgb(16 43 73 / 10%); transform: scale(1); }
  50% { box-shadow: 0 8px 24px rgb(23 109 168 / 32%); transform: scale(1.06); }
}

@keyframes skeleton-wave {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.tanya-retry {
  margin-top: 8px;
  border: 1px solid #e6b6b0;
  border-radius: 10px;
  padding: 7px 12px;
  background: #fff;
  color: #8a2a20;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}

/* Baris ketika jatah harian habis: tawarkan masuk, bukan tombol ulang. */
.tanya-row.is-quota .tanya-msg {
  border: 1px solid #cfe0cf;
  border-radius: 14px;
  padding: 11px 14px;
  background: #f2faf4;
  color: #123f2c;
  font-size: .9rem;
}

/* Satu-satunya pintasan masuk kader yang tersisa di halaman ini: muncul saat
   jatah tamu benar-benar habis, itupun tanpa gaya promosi. */
.tanya-upgrade {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin: 6px 6px 0 0;
  border: 1px solid #bcd2e6;
  border-radius: 11px;
  padding: 9px 14px;
  background: #fff;
  color: var(--blue);
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}

.tanya-upgrade:hover {
  border-color: var(--blue);
  background: var(--sky);
}

/* Sumber berkas yang dikutip model — terlihat oleh pembaca, isinya tidak ikut terkirim. */
.tanya-sumber {
  margin-top: 11px;
  border-top: 1px dashed #cfdeec;
  padding-top: 9px;
}

.tanya-sumber.is-empty {
  border-top-style: solid;
}

.tanya-sumber-title {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.tanya-sumber-catat {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: .72rem;
  font-style: italic;
  line-height: 1.45;
}

.tanya-sumber ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.tanya-sumber li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  border: 1px solid #dbe6f1;
  border-radius: 9px;
  padding: 5px 9px;
  background: #f5f9fd;
  font-size: .75rem;
  line-height: 1.35;
}

.tanya-sumber li span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tanya-sumber li em {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 260px;
  overflow: hidden;
  color: var(--muted);
  font-style: normal;
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tanya-sumber-link {
  color: var(--blue);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Rujukan harus bisa diperiksa, bukan cuma dibaca: tautan ke halaman aslinya. */
.tanya-sumber-buka {
  flex: 0 0 auto;
  border: 1px solid #cfe1f3;
  border-radius: 999px;
  padding: 2px 9px;
  background: #fff;
  color: var(--blue);
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
}

.tanya-sumber-buka:hover,
.tanya-sumber-buka:focus-visible {
  border-color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Rujukan hasil penelusuran: boleh diklik supaya pembaca bisa memeriksa aslinya. */
.tanya-sumber-web li {
  border-color: #d7e6dd;
  background: #f3faf5;
}

.tanya-sumber-web li a {
  min-width: 0;
  overflow: hidden;
  color: #12603a;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

.tanya-sumber-web li a:hover,
.tanya-sumber-web li a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Data resmi pengurus: kalimatnya utuh, jadi boleh turun baris. */
.tanya-sumber-resmi {
  gap: 7px;
}

.tanya-sumber-resmi li {
  display: block;
  flex: 1 1 240px;
  border-color: #e6dcb8;
  background: #fdfaef;
  line-height: 1.4;
}

.tanya-sumber-resmi li span {
  display: block;
  overflow: visible;
  color: #6b5310;
  font-weight: 700;
  text-overflow: unset;
  white-space: normal;
}

.tanya-sumber-resmi li em {
  display: block;
  max-width: none;
  overflow: visible;
  margin-top: 2px;
  font-size: .68rem;
  text-overflow: unset;
  white-space: normal;
}

.tanya-composer {
  flex: 0 0 auto;
  border-top: 0;
  padding: 8px 20px 10px;
  background: linear-gradient(180deg, rgb(251 253 254 / 0%), #fff 40%);
  box-shadow: 0 -10px 24px rgb(16 43 73 / 4%);
}

/* Blur hanya di layar dengan penunjuk dan ruang GPU lebih. Di HP, area yang
   diburamkan adalah percakapan yang terus bergulir, jadi setiap bingkai harus
   menggambar ulang isi di belakangnya — latarnya sudah putih solid. */
@media (hover: hover) and (min-width: 721px) {
  .tanya-composer {
    backdrop-filter: blur(16px);
  }
}

/* Satu kartu, satu garis tepi. Kolom tulis dan tombol kirim berbagi wadah yang
   sama; sebelumnya keduanya berbingkai sendiri sehingga tampak bertumpuk. */
.tanya-field {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: min(760px, 100%);
  margin: 0 auto;
  border: 1px solid #d9e5f1;
  border-radius: 24px;
  padding: 5px 5px 5px 15px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.tanya-field:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgb(23 109 168 / 12%);
}

/* Kirim dan Hentikan menempati lubang yang sama. Kalau keduanya berdiri di
   baris flex, tombol Hentikan menarik 56px tambahan dan kolom tulis menyempit
   tepat saat pengguna paling sibuk membaca jawaban. */
.tanya-kontrol {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}

/* Satu baris (24px) + bantalan = 44px saat kosong; tumbuh sampai 110px lalu
   menggulir di dalam, jadi komposer tidak pernah memakan percakapan. */
.tanya-field textarea {
  flex: 1;
  min-width: 0;
  min-height: 24px;
  max-height: 110px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  line-height: 1.5;
  padding: 10px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  resize: none;
  outline: none;
}

.tanya-submit {
  position: absolute;
  inset: 0;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 14px rgb(23 109 168 / 22%);
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.tanya-submit:hover:not(:disabled) {
  box-shadow: 0 8px 18px rgb(23 109 168 / 30%);
}

.tanya-submit svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tanya-submit:active {
  transform: scale(.93);
}

.tanya-submit:disabled {
  opacity: .5;
  cursor: progress;
}

/* Hentikan menempati slot yang sama, jadi kirim harus benar-benar tersisih. */
.tanya-submit.is-tertutup {
  opacity: 0;
  pointer-events: none;
  transform: scale(.7);
}

/* Saat jawaban disusun, Hentikan berdenyat supaya statusnya terasa hidup. */
.tanya-composer.is-busy .tanya-stop {
  animation: stop-pulse 1.4s ease-in-out infinite;
}

@keyframes stop-pulse {
  0%, 100% { box-shadow: 0 6px 16px rgb(16 43 73 / 8%); }
  50% { box-shadow: 0 6px 24px rgb(36 80 121 / 30%); }
}

/* Saat jawaban disusun, tombol kirim berganti menjadi Hentikan di lubang yang
   sama: bulat 44px, ikon kotak, label tetap terbaca oleh pembaca layar. */
.tanya-stop {
  position: absolute;
  inset: 0;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #d6e3f0;
  border-radius: 50%;
  padding: 0;
  background: #fff;
  color: #245079;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 6px 16px rgb(16 43 73 / 8%);
  animation: bubble-in .22s ease both;
}

.tanya-stop::before {
  width: 12px;
  height: 12px;
  border-radius: 3.5px;
  background: #245079;
  content: '';
}

.tanya-stop > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tanya-stop:hover {
  border-color: #b9d3ea;
  background: #f4f9fd;
}

.tanya-stop[hidden] {
  display: none;
}

/* ------------------------------------------------------------- lampiran

   Pratinjau lampiran menempati jalur sendiri di atas kolom tulis: gambar
   sebagai miniatur, PDF sebagai kartu nama berkas. Tombol penjepit kertas
   duduk di sisi kiri dalam kolom, sejajar dengan titik awal teks. */
.tanya-lampiran {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: min(760px, 100%);
  margin: 0 auto 8px;
}

.tanya-lampiran[hidden] {
  display: none;
}

.tanya-lampiran-item {
  position: relative;
  animation: bubble-in .22s ease both;
}

.tanya-lampiran-item.is-gambar {
  width: 64px;
  height: 64px;
  border: 1px solid #d9e5f1;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 3px 10px rgb(16 43 73 / 8%);
}

.tanya-lampiran-item.is-gambar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tanya-lampiran-item.is-dokumen {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid #d9e5f1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 10px rgb(16 43 73 / 8%);
}

.tanya-lampiran-item.is-dokumen > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tanya-lampiran-meta {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.tanya-lampiran-meta b {
  overflow: hidden;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tanya-lampiran-meta em {
  color: #93a2b3;
  font-size: .68rem;
  font-style: normal;
}

.tanya-lampiran-item button {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: #eef4fa;
  color: #5c7088;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.tanya-lampiran-item.is-gambar button {
  position: absolute;
  top: -7px;
  right: -7px;
  border: 2px solid #fff;
  background: #16324f;
  color: #fff;
}

.tanya-lampiran-item button:hover {
  background: #fdecec;
  color: #b3261e;
}

.tanya-lampiran-item button svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.tanya-lampir {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  margin-bottom: 2px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: none;
  color: #7e91a6;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.tanya-lampir:hover:not(:disabled) {
  background: #eef4fa;
  color: var(--blue);
}

.tanya-lampir:active {
  transform: scale(.92);
}

.tanya-lampir:disabled {
  opacity: .45;
  cursor: default;
}

.tanya-lampir[hidden] {
  display: none;
}

.tanya-lampir svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Kolom tulis sedikit menghemat ruang kiri karena tombol lampir sudah ada. */
.tanya-field:has(.tanya-lampir:not([hidden])) {
  padding-left: 8px;
}

/* Pintasan kembali ke jawaban terbaru; hanya muncul saat pembaca menggulir ke atas. */
.tanya-bawah {
  position: absolute;
  bottom: calc(var(--tanya-composer-tinggi, 132px) + 14px);
  left: 50%;
  z-index: 4;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #dbe6f1;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  cursor: pointer;
  box-shadow: 0 8px 20px rgb(16 43 73 / 14%);
  transform: translateX(-50%);
  animation: bubble-in .22s ease both;
}

.tanya-bawah[hidden] {
  display: none;
}

.tanya-bawah svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tanya-stage {
  position: relative;
}

/* Umpan balik kecil untuk salin/unduh, persis seperti aplikasi AI yang dikenal. */
.tanya-toast {
  position: fixed;
  bottom: calc(var(--tanya-composer-tinggi, 132px) + 18px);
  left: 50%;
  z-index: 48;
  max-width: min(88vw, 420px);
  border-radius: 12px;
  padding: 10px 16px;
  background: #14304d;
  color: #f3f8fd;
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 14px 30px rgb(9 27 44 / 32%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity .2s ease, transform .2s ease;
}

.tanya-toast.is-tampil {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Sisa kuota: satu baris kecil di bawah kolom tulis, tanpa tombol apa pun.
   Tidak ada lagi promosi di area ini — dulu baris ini juga memuat tombol
   "Unduh PDF percakapan", "Percakapan baru", dan "Masuk kader, jatah naik". */
.tanya-meter {
  width: min(760px, 100%);
  margin: 7px auto 0;
  color: #93a2b3;
  font-size: .7rem;
  line-height: 1.35;
  text-align: center;
}

.tanya-meter[hidden] {
  display: none;
}

/* Pintasan percakapan baru pindah ke header: ikon kecil, bukan tombol teks
   besar yang memakan dua baris di bawah kolom tulis. */
.tanya-baru {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #dde7f1;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.tanya-baru:hover {
  border-color: var(--blue);
  background: var(--sky);
}

.tanya-baru:active {
  transform: scale(.92);
}

.tanya-baru svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ------------------------------------------------------- riwayat percakapan

   Laci kiri berisi daftar percakapan yang pernah dibuka. Drawernya memakai
   bahasa visual yang sama dengan menu "Lainnya": backdrop bening-navy, panel
   putih melebar dari tepi, judul bagian huruf kecil berjarak. */
.tanya-riwayat-buka {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #dde7f1;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.tanya-riwayat-buka:hover,
.tanya-riwayat-buka.is-aktif {
  border-color: var(--blue);
  background: var(--sky);
}

.tanya-riwayat-buka:active {
  transform: scale(.92);
}

.tanya-riwayat-buka svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.tanya-riwayat {
  position: fixed;
  z-index: 46;
  inset: 0;
  visibility: hidden;
  transition: visibility .24s ease;
}

.tanya-riwayat.is-open {
  visibility: visible;
}

.tanya-riwayat-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(9 30 52 / 52%);
  cursor: default;
  opacity: 0;
  transition: opacity .24s ease;
}

.tanya-riwayat.is-open .tanya-riwayat-backdrop {
  opacity: 1;
}

.tanya-riwayat-panel {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 0 auto 0 0;
  width: min(340px, 88vw);
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  border-right: 1px solid #dde7f1;
  background: #fff;
  box-shadow: 14px 0 40px rgb(9 30 52 / 22%);
  transform: translateX(-102%);
  overscroll-behavior: contain;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.tanya-riwayat.is-open .tanya-riwayat-panel {
  transform: none;
}

/* Layar lebar: riwayat menjadi rail kiri yang selalu tampil, bukan dialog
   yang perlu dibuka. Ponsel dan tablet tetap memakai slide-over. Di dalam
   AppLayout kerangka aplikasi (sidebar + bar) yang mengatur layar, jadi
   halaman ini tidak ikut diubah menjadi grid. */
@media (min-width: 1025px) {
  body.tanya-page:not(.aplikasi) {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  body.tanya-page:not(.aplikasi) > .site-header,
  body.tanya-page:not(.aplikasi) > .nav-sheet {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body.tanya-page:not(.aplikasi) > main {
    grid-column: 2;
    grid-row: 2;
  }

  body.tanya-page:not(.aplikasi) .tanya-riwayat {
    position: relative;
    visibility: visible;
    inset: auto;
    grid-column: 1;
    grid-row: 2;
  }

  body.tanya-page:not(.aplikasi) .tanya-riwayat-backdrop,
  body.tanya-page:not(.aplikasi) .tanya-riwayat-buka,
  body.tanya-page:not(.aplikasi) .tanya-riwayat-kepala button {
    display: none;
  }

  body.tanya-page:not(.aplikasi) .tanya-riwayat-panel {
    position: relative;
    inset: auto;
    width: auto;
    height: 100%;
    box-shadow: none;
    transform: none;
  }
}

.tanya-riwayat-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaf0f6;
}

.tanya-riwayat-kepala p {
  margin: 0;
  color: #6c7d90;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tanya-riwayat-kepala button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f2f6fb;
  color: #43607d;
  cursor: pointer;
}

.tanya-riwayat-kepala button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
}

.tanya-riwayat-baru {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px dashed #b9cbe0;
  border-radius: 12px;
  background: var(--sky);
  color: var(--blue);
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}

.tanya-riwayat-baru:hover {
  border-color: var(--blue);
  background: #e6f0fa;
}

.tanya-riwayat-baru svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
}

.tanya-riwayat-kosong {
  margin: 6px 2px 0;
  color: #8a99ab;
  font-size: .8rem;
  line-height: 1.5;
}

.tanya-riwayat-kosong[hidden] {
  display: none;
}

.tanya-riwayat-daftar {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
}

.tanya-riwayat-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 6px;
  border: 1px solid #eaf0f6;
  border-radius: 12px;
  background: #fbfdff;
}

.tanya-riwayat-item.is-aktif {
  border-color: var(--blue);
  background: #fff;
}

.tanya-riwayat-pilih {
  display: grid;
  gap: 3px;
  padding: 9px 4px 9px 11px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tanya-riwayat-pilih[hidden],
.tanya-riwayat-alat[hidden] {
  display: none;
}

.tanya-riwayat-judul {
  overflow: hidden;
  color: #16324f;
  font-size: .85rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tanya-riwayat-meta {
  color: #93a2b3;
  font-size: .7rem;
}

.tanya-riwayat-alat {
  display: flex;
  gap: 2px;
  padding-right: 6px;
}

.tanya-riwayat-act {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #7e91a6;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.tanya-riwayat-act:hover {
  background: #eef4fa;
  color: var(--blue);
}

.tanya-riwayat-act.is-bahaya:hover {
  background: #fdecec;
  color: #b3261e;
}

.tanya-riwayat-act svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tanya-riwayat-input {
  grid-column: 1 / -1;
  margin: 8px 10px;
  padding: 8px 10px;
  border: 1px solid var(--blue);
  border-radius: 9px;
  background: #fff;
  color: #16324f;
  font: inherit;
  font-size: .85rem;
}

.tanya-riwayat-item.is-konfirmasi {
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 10px 11px;
  border-color: #f2c7c5;
  background: #fdf4f3;
}

.tanya-riwayat-tanya {
  color: #8a2f2a;
  font-size: .8rem;
  font-weight: 700;
}

.tanya-riwayat-ya {
  display: flex;
  gap: 8px;
}

.tanya-riwayat-ya button {
  padding: 6px 12px;
  border: 1px solid #d9c3c0;
  border-radius: 9px;
  background: #fff;
  color: #5f6d7c;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

.tanya-riwayat-ya-hapus {
  border-color: #b3261e !important;
  background: #b3261e !important;
  color: #fff !important;
}

.tanya-riwayat-kaki {
  margin: 10px 2px 0;
  padding-top: 10px;
  border-top: 1px solid #eaf0f6;
  color: #93a2b3;
  font-size: .72rem;
  line-height: 1.5;
}

@media (min-width: 900px) {
  /* Laci desktop ala bilah sisi: backdrop lebih tipis supaya percakapan di
     belakangnya masih terbaca, panel membulat di sudut kanan. */
  .tanya-riwayat-backdrop {
    background: rgb(9 30 52 / 28%);
  }

  .tanya-riwayat.is-open .tanya-riwayat-backdrop {
    backdrop-filter: blur(3px);
  }

  .tanya-riwayat-panel {
    width: 340px;
    inset: 64px auto 0 0;
    padding: 16px;
    border-right: 1px solid #dde7f1;
    border-radius: 0 18px 18px 0;
  }
}

@media (max-width: 680px) {
  .tanya-scroll {
    padding: 14px 14px 6px;
  }

  .tanya-intro {
    padding: 14px 0 8px;
  }

  .tanya-intro img {
    width: 52px;
    height: 52px;
  }

  .tanya-intro > p {
    margin-bottom: 14px;
    font-size: .9rem;
  }

  .tanya-msg {
    max-width: 88%;
    font-size: .95rem;
  }

  /* Jawaban butuh kolom penuh: tabel dan blok kode tidak muat bila 88%. */
  .tanya-row.is-assistant .tanya-msg {
    max-width: 100%;
  }

  .tanya-sorot-kepala,
  .tanya-terminal-kepala {
    flex-wrap: wrap;
    gap: 6px;
    padding: 7px 9px;
  }

  .tanya-sorot_tombol,
  .tanya-terminal_tombol {
    margin-left: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .tanya-kode,
  .tanya-terminal-badan {
    font-size: .78rem;
  }

  .tanya-kode.is-nomor .tanya-baris-kode {
    padding-left: 38px;
  }

  .tanya-kode.is-nomor .tanya-baris-kode::before {
    width: 28px;
  }

  .tanya-tabel {
    font-size: .84rem;
  }

  .tanya-tabel th,
  .tanya-tabel td {
    padding: 7px 9px;
  }

  /* Satu cadangan bar navigasi saja. <body> sudah menyisakan 76px + safe area
     di bawahnya; komposer yang juga menyisakan 76px untuk dirinya sendiri
     menumpuk cadangan itu menjadi pita kosong 81px antara baris terakhir
     komposer dan bar navigasi. */
  .tanya-composer {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  /* Saat papan ketik tampil, bar navigasi sudah tertekan ke bawah layar:
     komposer cukup menempel di atas papan ketik. */
  body.tanya-keyboard-up .tanya-composer {
    padding-bottom: 8px;
  }

  /* Cadangan 76px untuk bar bawah juga ada di <body>; ikut dilepas supaya
     komposer benar-benar menempel di atas papan ketik, tidak menggantung. */
  body.tanya-keyboard-up {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  /* iOS berhenti memperbesar halaman saat kolom diisi bila teksnya 16px. */
  .tanya-field textarea {
    font-size: 16px;
  }

  .tanya-meter {
    font-size: .72rem;
  }

  /* Toolbar jawaban ikut target sentuh 44px, sama seperti kontrol lainnya. */
  .tanya-act {
    min-height: 44px;
    padding: 5px 11px;
  }

  .tanya-upgrade {
    min-height: 44px;
  }

  .tanya-baru {
    width: 44px;
    height: 44px;
  }

  /* Tombol lampir dan aksi riwayat ikut target sentuh 44px; kartu riwayat
     diberi ruang bantalan lebih supaya ibu jari tidak salah tekan. */
  .tanya-lampir {
    width: 44px;
    height: 44px;
    margin-bottom: 0;
  }

  .tanya-lampiran-item.is-gambar {
    width: 56px;
    height: 56px;
  }

  .tanya-lampiran-item button {
    width: 24px;
    height: 24px;
  }

  .tanya-riwayat-act {
    width: 40px;
    height: 40px;
  }

  .tanya-riwayat-pilih {
    padding: 11px 6px 11px 13px;
  }

  .tanya-kontrol {
    width: 44px;
    height: 44px;
  }
}

/* Layar sempit: toolbar jawaban memakai ikon saja, label tetap ada di a11y tree. */
@media (max-width: 430px) {
  .tanya-act span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Ikon saja, tetapi tetap 44x44: labelnya pindah ke a11y tree, bukan
     menyusutkan area sentuhan di bawah satu jari. */
  .tanya-act {
    min-width: 44px;
    justify-content: center;
    padding: 5px 8px;
  }

  .tanya-act.is-unduh {
    padding: 5px 13px;
  }

  .tanya-toast {
    font-size: .78rem;
  }
}

/* ---------- lembar cetak PDF ------------------------------------------------
 * Ekspor PDF memakai dokumen yang disusun ulang di #tanyaPrint, lalu gaya di
 * bawah ini yang mengubahnya menjadi A4 rapi: kop, judul, tanggal, nomor
 * halaman, dan pemutusan bagian yang tidak memotong tabel atau blok kode.
 */
#tanyaPrint {
  display: none;
}

@page {
  size: A4;
  margin: 17mm 15mm 19mm;

  /* Nomor halaman di margin — Chromium dan Safari; Firefox memakai .tanya-cetak-kaki. */
  @bottom-center {
    margin-top: 4mm;
    border-top: 0.4pt solid #c9d8e6;
    padding-top: 2mm;
    color: #5d6f83;
    content: 'Tanya PII — Asisten Pelajar Islam Indonesia   ·   Halaman ' counter(page) ' dari ' counter(pages);
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 8.5pt;
  }
}

@media print {
  /* Selain lembar cetak, seluruh isi halaman disembunyikan: header, komposer,
     panel akun, toast — apa pun anak langsung <body> kecuali #tanyaPrint. */
  body.tanya-mencetak > :not(#tanyaPrint) {
    display: none !important;
  }

  body.tanya-mencetak,
  body.tanya-mencetak * {
    overflow: visible !important;
    box-shadow: none !important;
  }

  body.tanya-mencetak {
    display: block;
    height: auto;
    margin: 0;
    background: #fff;
    color: #12212f;
    font-size: 10.6pt;
    line-height: 1.62;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #tanyaPrint {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .tanya-cetak-kop {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 7mm;
    border-bottom: 1.6pt solid #0c2948;
    font-size: 9pt;
  }

  .tanya-cetak-kop img {
    width: 34px;
    height: 34px;
    object-fit: contain;
  }

  .tanya-cetak-kop span {
    display: flex;
    flex-direction: column;
    color: #0c2948;
  }

  .tanya-cetak-kop b {
    font-size: 13pt;
    letter-spacing: -.01em;
  }

  .tanya-cetak-kop small {
    color: #4a6b8c;
    font-size: 8.6pt;
  }

  .tanya-cetak-kop em {
    margin-left: auto;
    color: #5d6f83;
    font-size: 8.2pt;
    font-style: normal;
    text-align: right;
  }

  .tanya-cetak-judul {
    margin: 7mm 0 2mm;
    color: #0c2948;
    font-size: 16pt;
    font-weight: 800;
    line-height: 1.3;
    break-after: avoid;
    page-break-after: avoid;
  }

  .tanya-cetak-info {
    margin: 0 0 8mm;
    color: #5d6f83;
    font-size: 8.8pt;
  }

  .tanya-cetak-bab {
    margin-bottom: 9mm;
    break-inside: auto;
  }

  .tanya-cetak-label {
    margin: 0 0 1.6mm;
    color: #4a6b8c;
    font-size: 8pt;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
  }

  .tanya-cetak-soal {
    margin: 0 0 5mm;
    padding: 3.4mm 4mm;
    border-left: 2.4pt solid #1d6da8;
    background: #f2f7fc;
    color: #0c2948;
    font-size: 11.6pt;
    font-weight: 700;
    line-height: 1.45;
    break-after: avoid;
    page-break-after: avoid;
  }

  .tanya-cetak-sumber {
    margin-top: 6mm;
    border-top: 0.6pt dashed #b9cbdc;
    padding-top: 4mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .tanya-cetak-sumber ul {
    margin: 0;
    padding-left: 16px;
    font-size: 9pt;
  }

  .tanya-cetak-kaki {
    margin-top: 8mm;
    border-top: 0.6pt solid #c9d8e6;
    padding-top: 3mm;
    color: #5d6f83;
    font-size: 8.2pt;
    line-height: 1.5;
  }

  /* Isi jawaban: hierarki judul tegas, tidak ada kepala yatim. */
  #tanyaPrint .tanya-para {
    margin: 0 0 3.2mm;
    text-align: left;
    orphans: 3;
    widows: 3;
  }

  #tanyaPrint .tanya-h {
    color: #0c2948;
    break-after: avoid;
    page-break-after: avoid;
  }

  #tanyaPrint .tanya-h2 { font-size: 13.4pt; margin: 7mm 0 2.6mm; }
  #tanyaPrint .tanya-h3 { font-size: 11.8pt; margin: 6mm 0 2.2mm; }
  #tanyaPrint .tanya-h4 { font-size: 10.8pt; margin: 5mm 0 2mm; }
  #tanyaPrint .tanya-h5,
  #tanyaPrint .tanya-h6 { font-size: 10.2pt; margin: 4.4mm 0 1.8mm; }

  #tanyaPrint .tanya-daf {
    margin: 0 0 3.4mm;
    padding-left: 6mm;
  }

  #tanyaPrint .tanya-butir {
    margin: 1.2mm 0;
  }

  #tanyaPrint .tanya-kotak.is-isi {
    border-color: #1d6da8;
    background: #1d6da8;
    color: #fff;
  }

  #tanyaPrint .tanya-inline-kode {
    border: 0.4pt solid #dce6f0;
    background: #f4f8fc;
    color: #12293f;
    font-family: 'DejaVu Sans Mono', Consolas, monospace;
    font-size: 9.2pt;
  }

  /* Tabel: garis tipis, kepala berulang di tiap halaman, tidak pernah terpotong. */
  #tanyaPrint .tanya-tabel-lapit {
    max-width: 100%;
    border: 0.7pt solid #9fb3c6;
    border-radius: 0;
  }

  #tanyaPrint .tanya-tabel {
    font-size: 9.4pt;
  }

  #tanyaPrint .tanya-tabel th {
    position: static;
    background: #eef4fa;
    border-bottom: 0.9pt solid #9fb3c6;
  }

  #tanyaPrint .tanya-tabel td {
    border-bottom: 0.4pt solid #d7e2ec;
  }

  #tanyaPrint .tanya-tabel tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  #tanyaPrint .tanya-tabel thead {
    display: table-header-group;
  }

  /* Kode dan terminal: latar tetap terlihat saat dicetak, isi tidak dipotong. */
  #tanyaPrint .tanya-sorot,
  #tanyaPrint .tanya-terminal {
    border: 0.7pt solid #1d3a58;
    border-radius: 0;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  #tanyaPrint .tanya-sorot-kepala,
  #tanyaPrint .tanya-terminal-kepala {
    background: #e8f0f8;
    border-bottom: 0.6pt solid #c2d4e4;
    color: #1d3a58;
    font-size: 8.2pt;
  }

  #tanyaPrint .tanya-sorot_bahasa,
  #tanyaPrint .tanya-terminal_judul {
    color: #0c2948;
  }

  #tanyaPrint .tanya-sorot_meta {
    color: #5d7a95;
  }

  #tanyaPrint .tanya-sorot_tombol,
  #tanyaPrint .tanya-terminal_tombol,
  #tanyaPrint .tanya-sorot-bentang,
  #tanyaPrint .tanya-terminal_lampu {
    display: none !important;
  }

  #tanyaPrint .tanya-kode,
  #tanyaPrint .tanya-terminal-badan {
    max-height: none !important;
    padding: 3mm 3.4mm;
    background: #f7fafd;
    color: #12293f;
    font-family: 'DejaVu Sans Mono', Consolas, monospace;
    font-size: 8.8pt;
    line-height: 1.5;
  }

  #tanyaPrint .tanya-sorot.is-lipat .tanya-sorot-badan {
    max-height: none !important;
    overflow: visible !important;
  }

  #tanyaPrint .tanya-baris-kode {
    color: #12293f;
  }

  #tanyaPrint .c-komentar { color: #5d6f83; }
  #tanyaPrint .c-kata,
  #tanyaPrint .c-pustaka,
  #tanyaPrint .c-penanda { color: #0d5b8a; }
  #tanyaPrint .c-fungsi { color: #7a4a1f; }
  #tanyaPrint .c-string { color: #1c6b46; }
  #tanyaPrint .c-nomor { color: #8a2a20; }
  #tanyaPrint .c-aksi { color: #4a5b6c; }

  #tanyaPrint .tanya-kode.is-nomor .tanya-baris-kode::before {
    color: #9fb3c6;
  }

  #tanyaPrint .tanya-term-baris.is-perintah .tanya-term-kode {
    color: #0c2948;
  }

  #tanyaPrint .tanya-term-ps { color: #1c6b46; }
  #tanyaPrint .tanya-term-baris.is-keluaran { color: #40566c; }
  #tanyaPrint .tanya-term-baris.is-gagal { color: #96322a; }
  #tanyaPrint .tanya-term-baris.is-waspad { color: #7a5b12; }
  #tanyaPrint .tanya-term-baris.is-beres { color: #1c6b46; }

  #tanyaPrint .tanya-kutipan {
    border-left: 2.2pt solid #b9cbdc;
    background: #f6f9fc;
    color: #29425a;
  }

  #tanyaPrint .tanya-matematika-blok {
    border: 0.6pt solid #c9d8e6;
    border-radius: 0;
    break-inside: avoid;
  }

  #tanyaPrint .tanya-gambar img {
    max-height: 78mm;
    width: auto;
  }

  /* Tautan: warna aman + URL aslinya ikut tertulis agar dokumen tetap jejak. */
  #tanyaPrint a {
    border: 0;
    background: none;
    color: #14496f;
    font-weight: 600;
    text-decoration: underline;
  }

  #tanyaPrint a[href^='https://']::after,
  #tanyaPrint a[href^='http://']::after {
    color: #5d6f83;
    font-size: 8pt;
    font-weight: 400;
    content: ' (' attr(href) ')';
  }

  #tanyaPrint .tanya-cat a::after,
  #tanyaPrint .tanya-rujukan::after {
    content: '';
  }
}

/* ---------- sentuhan ponsel: target kecil diperbesar, pembaca dirapikan ---------- */

@media (max-width: 680px) {
  .text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Tautan yang menyatu dalam kalimat jangan sampai meninggalkan baris kosong. */
  p .text-link {
    display: inline;
    min-height: 0;
  }

  .ayah-play,
  .ib-adzan-play,
  .reader-bar button {
    min-height: 44px;
  }

  /* Setiap ayat punya tombol "Tafsir" sendiri — tanpa pelebaran, halaman Quran penuh target kecil. */
  .ayah-tafsir summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .reader-pager button {
    min-height: 44px;
    padding: 9px 12px;
  }

  /* Tombol bantuan/layar penuh di atas globe: 34px terlalu kecil untuk jari. */
  .globe-icon-btn {
    width: 44px;
    height: 44px;
  }

  /* Logo di header/footer dan tautan Lembaga/Admin ikut dilebarkan. */
  .brand,
  .admin-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .reader-bar {
    gap: 8px;
    padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  }

  .reader-bar button {
    flex: 0 1 auto;
    font-size: .8rem;
  }

  /* Layar pendek: hanya sampul potret yang diperpendek. Membatasi tinggi
     sembarang sampul membuat rasio aslinya melenceng, jadi tidak dipakai. */
  .reader-cover.is-potret {
    max-height: 46vh;
  }

  .reader-article {
    padding: 24px 18px calc(60px + env(safe-area-inset-bottom));
  }

  .reader-article p {
    font-size: 1.02rem;
    line-height: 1.72;
  }

  .article-open {
    width: 100%;
    justify-content: space-between;
  }
}

/* Ukuran huruf terkecil di ponsel dinaikkan supaya tetap nyaman dibaca. */
@media (max-width: 680px) {
  nav:not(.footer-auth) a,
  .nav-more {
    font-size: .72rem;
  }

  .site-header .brand small,
  footer .brand small {
    font-size: .74rem;
  }

  /* Kapel "menuju waktu sholat" di beranda: 10,8px terlalu kecil. */
  .teaser-next span,
  .teaser-times span {
    font-size: .72rem;
    letter-spacing: .06em;
  }

  .stats span {
    font-size: .74rem;
  }

  .install-app {
    font-size: .72rem;
  }

  /* Pill slogan di beranda sempat turun ke 9px di ponsel — dinaikkan lagi. */
  .hero-copy .eyebrow {
    font-size: .74rem;
    letter-spacing: .1em;
  }
}

/* 320px: nama sholat ditulis biasa (bukan kapital) supaya muat tanpa mengecil
   di bawah 10,5px — aturan ini ditaruh paling akhir agar mengalahkan blok 680px. */
@media (max-width: 380px) {
  .teaser-times {
    gap: 6px;
  }

  .teaser-times li {
    padding: 9px 7px;
  }

  .teaser-times span {
    font-size: .72rem;
    letter-spacing: 0;
    text-transform: none;
  }

  .teaser-times strong {
    font-size: .98rem;
  }
}

@media (max-width: 680px) {
  body {
    overflow-x: clip;
  }

  .hero {
    padding-right: max(20px, env(safe-area-inset-right));
    padding-left: max(20px, env(safe-area-inset-left));
  }

  .hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .hero-actions .button {
    width: 100%;
    justify-content: center;
  }

  .section-heading > p:not(.eyebrow) {
    max-width: 54ch;
    font-size: .9rem;
    line-height: 1.6;
  }

  .article-cover {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .article-card,
  .gallery-item,
  .acara-card {
    border-radius: 15px;
    box-shadow: 0 8px 24px rgb(16 43 73 / 7%);
  }

  .article-card:hover,
  .acara-card:hover {
    transform: none;
  }

  .article-body h3 {
    font-size: 1.08rem;
    line-height: 1.35;
  }

  .article-body > p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .gallery-item {
    overflow: hidden;
  }

  .gallery-item img {
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .acara-cover {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .acara-card:hover .acara-cover img {
    transform: none;
  }

  .acara-search input,
  .acara-level select {
    min-height: 48px;
    border-radius: 14px;
    font-size: 16px;
  }

  .acara-chips button {
    min-height: 44px;
    border-radius: 13px;
  }

  .article-card,
  .acara-card,
  .gallery-item {
    -webkit-tap-highlight-color: transparent;
  }

  .article-card:active,
  .acara-card:active {
    transform: scale(.99);
  }

  /* Kartu tanpa foto masih tampak rapi: logo kecil di atas warna lembut, bukan blok abu. */
  .placeholder-cover {
    background: linear-gradient(160deg, var(--sky), #fff 76%);
  }

  .placeholder-cover img {
    width: 78px;
    height: 78px;
  }

  .reader-article img {
    margin: 18px auto;
  }
}

@media (max-width: 420px) {
  .site-header {
    gap: 8px;
  }

  .site-header .brand {
    min-width: 0;
  }

  .site-header .brand span {
    min-width: 0;
  }

  .site-header .brand small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .section {
    padding-right: max(17px, env(safe-area-inset-right));
    padding-left: max(17px, env(safe-area-inset-left));
  }

  .article-body {
    padding: 15px;
  }
}

/* ----------------------------------------------------------- visual system */
:root {
  --navy: #0e2b49;
  --blue: #176da8;
  --sky: #edf6fd;
  --green: #14763f;
  --ink: #17283b;
  --muted: #64748b;
  --line: #e3eaf1;
  --soft: #f6f9fc;
  --radius: 20px;
}

body {
  background: #fbfcfe;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button,
.button,
.install-app {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible,
a:focus-visible {
  outline: 3px solid rgb(23 109 168 / 38%);
  outline-offset: 3px;
}

.site-header {
  border-bottom-color: #e8eef4;
  box-shadow: 0 5px 22px rgb(16 43 73 / 4%);
}

.site-header nav a {
  border-radius: 999px;
  padding: 9px 12px;
  transition: background-color .18s ease, color .18s ease;
}

.site-header nav a:hover {
  background: #f1f6fb;
}

.site-header nav a[aria-current='page'] {
  border-radius: 999px;
  background: #edf5fb;
}

.site-header nav a[aria-current='page']::after {
  display: none;
}

.hero {
  background:
    radial-gradient(ellipse at 87% 15%, rgb(91 171 224 / 30%), transparent 30%),
    linear-gradient(118deg, #0d2946 0%, #145486 70%, #1b6ca2 100%);
}

.hero h1 {
  max-width: 13ch;
  text-wrap: balance;
}

.hero-copy > p:not(.eyebrow) {
  line-height: 1.75;
}

.button,
.install-app {
  min-height: 46px;
  border-radius: 13px;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.button:hover,
.install-app:hover {
  transform: translateY(-2px);
}

.button-light {
  box-shadow: 0 10px 24px rgb(3 23 43 / 18%);
}

.section-heading {
  margin-bottom: 28px;
}

.section-heading h2 {
  max-width: 22ch;
  text-wrap: balance;
}

.article-card,
.pillar-card,
.teaser-card,
.guide-card,
.gallery-item,
.acara-card,
.data-stat {
  border: 1px solid var(--line);
  box-shadow: 0 8px 26px rgb(16 43 73 / 5%);
}

.article-card,
.pillar-card,
.teaser-card,
.guide-card,
.gallery-item,
.acara-card {
  border-radius: 20px;
}

.article-card:hover,
.pillar-card:hover,
.gallery-item:hover,
.acara-card:hover {
  box-shadow: 0 16px 38px rgb(16 43 73 / 10%);
}

.article-body {
  padding: 22px 23px 24px;
}

.article-body h3,
.acara-body h3 {
  text-wrap: pretty;
}

.article-open {
  min-height: 44px;
}

.gallery-item img {
  background: #edf3f8;
}

.acara-hero {
  background:
    radial-gradient(ellipse at 95% 0%, rgb(91 171 224 / 25%), transparent 34%),
    linear-gradient(118deg, #0d2946 0%, #145486 72%, #1b6ca2 100%);
}

.acara-board {
  background: linear-gradient(180deg, #f7fafd 0%, #fff 42%);
}

.acara-chips {
  border-color: #e1e9f1;
  background: #f5f8fb;
}

.acara-chips button {
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.acara-chips button.is-active {
  box-shadow: 0 3px 10px rgb(16 43 73 / 9%);
}

input:not([type='checkbox']):not([type='radio']),
select,
textarea {
  border-color: #dce5ee;
  border-radius: 12px;
  background-color: #fff;
}

input:not([type='checkbox']):not([type='radio']):focus,
select:focus,
textarea:focus {
  border-color: #69a6d2;
  box-shadow: 0 0 0 4px rgb(23 109 168 / 10%);
}

footer {
  background: linear-gradient(125deg, #0b2037, #102d4a);
}

@media (min-width: 681px) {
  .site-header {
    min-height: 82px;
  }

  .hero {
    min-height: 510px;
    padding-top: 82px;
    padding-bottom: 82px;
  }

  .hero-mark img {
    width: min(330px, 88%);
    border-color: rgb(255 255 255 / 62%);
    box-shadow: 0 28px 80px rgb(3 23 43 / 34%);
  }

  .stats {
    margin-top: -20px;
    position: relative;
    z-index: 1;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgb(16 43 73 / 6%);
  }
}

@media (min-width: 1025px) {
  .hero h1 {
    max-width: 24ch;
    font-size: clamp(2.6rem, 4.2vw, 3.8rem);
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  .site-header {
    gap: 12px;
    padding-right: 28px;
    padding-left: 28px;
  }

  .site-header .brand {
    flex: 0 1 260px;
    min-width: 160px;
    gap: 9px;
  }

  .site-header .brand span {
    min-width: 0;
  }

  .site-header .brand b,
  .site-header .brand small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-header nav {
    flex: 1 1 auto;
    min-width: 0;
    gap: clamp(6px, 1vw, 12px);
  }

  .site-header nav a {
    padding-right: clamp(4px, .6vw, 8px);
    padding-left: clamp(4px, .6vw, 8px);
    white-space: nowrap;
  }
}

@media (min-width: 681px) and (max-width: 1024px) {
  .site-header {
    gap: 12px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .site-header .brand {
    flex: 0 1 202px;
    gap: 8px;
  }

  .site-header .brand span {
    min-width: 0;
  }

  .site-header .brand img {
    width: 42px;
    height: 42px;
  }

  .site-header .brand b {
    overflow: hidden;
    font-size: .96rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-header .brand small {
    overflow: hidden;
    font-size: .66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-header nav {
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
    font-size: .8rem;
  }

  .site-header nav a {
    padding: 8px 7px;
  }

  .site-header nav .nav-extra {
    display: none;
  }

  .site-header nav .nav-more {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 40px;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 10px;
    background: #fff;
    color: var(--navy);
    font: inherit;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
  }

  .site-header nav .nav-icon {
    display: block;
    width: 18px;
    height: 18px;
  }

  .site-header .account-slot .account-button {
    min-height: 40px;
    padding-right: 9px;
    font-size: .76rem;
  }

  .hero {
    min-height: 460px;
    grid-template-columns: minmax(0, 1.25fr) minmax(190px, .75fr);
    gap: 20px;
    padding-top: 54px;
    padding-bottom: 54px;
  }

  .hero h1 {
    max-width: 24ch;
    font-size: clamp(2rem, 4.2vw, 3.2rem);
  }

  .hero-copy > p:not(.eyebrow) {
    font-size: .94rem;
    line-height: 1.6;
  }

  .hero-actions {
    gap: 8px;
    margin-top: 18px;
  }

  .hero-mark img {
    width: min(230px, 82%);
  }
}

@media (min-width: 681px) and (max-width: 767px) {
  .site-header .account-slot .account-label {
    display: none;
  }
}

@media (max-width: 680px) {
  .site-header {
    min-height: 66px;
    box-shadow: 0 5px 18px rgb(16 43 73 / 6%);
  }

  nav:not(.footer-auth) {
    border-top-color: #e6edf4;
    padding-right: max(8px, env(safe-area-inset-right));
    padding-left: max(8px, env(safe-area-inset-left));
    background: rgb(255 255 255 / 97%);
    box-shadow: 0 -8px 28px rgb(16 43 73 / 9%);
  }

  nav:not(.footer-auth) a,
  nav:not(.footer-auth) .nav-more {
    min-height: 52px;
    border-radius: 13px;
    font-size: .7rem;
  }

  nav:not(.footer-auth) a[aria-current='page'] {
    background: #edf5fb;
    color: var(--navy);
  }

  nav:not(.footer-auth) a[aria-current='page']::after {
    display: block;
  }

  .hero {
    padding: 34px 20px 30px;
    border-radius: 0 0 23px 23px;
    background:
      radial-gradient(ellipse at 100% 0%, rgb(91 171 224 / 24%), transparent 34%),
      linear-gradient(145deg, #0d2946 0%, #145486 72%, #1b6ca2 100%);
  }

  .hero h1 {
    max-width: 22ch;
    margin-top: 15px;
    font-size: clamp(1.75rem, 8vw, 2.1rem);
    line-height: 1.08;
    letter-spacing: -.045em;
  }

  .hero-copy > p:not(.eyebrow) {
    max-width: 48ch;
    font-size: .96rem;
    line-height: 1.65;
  }

  .hero-copy .source-note {
    font-size: .72rem;
  }

  .hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 20px;
  }

  .hero-actions .button:first-child {
    grid-column: 1 / -1;
  }

  .hero-actions .button {
    min-height: 46px;
    padding: 10px 11px;
    font-size: .82rem;
  }

  .hero-actions .button-ghost {
    border: 1px solid rgb(255 255 255 / 35%);
    background: rgb(255 255 255 / 8%);
    color: #fff;
  }

  .stats {
    gap: 12px;
    padding: 17px 16px;
    background: #fff;
  }

  .stats div {
    min-width: 0;
  }

  .stats strong {
    font-size: .86rem;
  }

  .stats span {
    font-size: .68rem;
    line-height: 1.4;
  }

  .section {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .section-heading {
    gap: 8px;
    margin-bottom: 20px;
  }

  .section-heading h2 {
    max-width: 25ch;
    font-size: clamp(1.45rem, 6vw, 1.9rem);
    line-height: 1.2;
  }

  .article-body {
    padding: 17px;
  }

  .article-meta {
    font-size: .74rem;
  }

  .article-open {
    min-height: 46px;
  }

  .gallery-item figcaption {
    padding: 13px 15px 15px;
  }

  .acara-hero {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .acara-hero h1 {
    max-width: 21ch;
    font-size: clamp(1.75rem, 7.2vw, 2.25rem);
    line-height: 1.12;
  }

  .acara-hero .ibadah-hero-copy > p:not(.eyebrow) {
    font-size: .92rem;
    line-height: 1.6;
  }

  .acara-board {
    background: linear-gradient(180deg, #f7fafd 0%, #fff 60%);
  }

  .acara-filters {
    gap: 9px;
    margin-bottom: 18px;
  }

  .acara-chips {
    width: 100%;
    justify-content: stretch;
    border-radius: 14px;
    padding: 4px;
  }

  .acara-chips button {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 10px;
    font-size: .78rem;
  }

  .acara-search,
  .acara-level {
    flex-basis: 100%;
  }

  .acara-search input,
  .acara-level select {
    width: 100%;
  }

  .acara-feed-status {
    margin-bottom: 10px;
  }

  .acara-body {
    gap: 8px;
    padding: 16px;
  }

  .guide-card {
    padding: 20px;
  }

  footer {
    gap: 12px;
    padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 380px) {
  .hero-actions .button {
    font-size: .76rem;
  }

  .acara-hero h1 {
    font-size: 1.72rem;
  }
}

/* ==========================================================================
   Feed kader — satu kolom selebar kartu baca, ritme sama dengan halaman
   Acara supaya perpindahan fitur tidak terasa pindah aplikasi.
   ========================================================================== */

.feed-page main {
  padding-inline: 16px;
}

.feed-board {
  width: min(640px, 100%);
  margin: 0 auto;
  padding: 18px 0 34px;
  display: grid;
  gap: 12px;
}

.feed-head {
  display: grid;
  gap: 10px;
  align-items: start;
}

.feed-head h1 {
  margin: 6px 0 4px;
  font-size: clamp(1.32rem, 4.2vw, 1.7rem);
  line-height: 1.16;
  letter-spacing: -.02em;
  color: var(--navy);
}

.feed-head p {
  margin: 0;
  font-size: .9rem;
}

.feed-head-side {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.feed-head-side .button {
  gap: 8px;
}

.feed-head-side .button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Saringan kabar memakai bar garis bawah yang menempel di bawah kepala
   halaman, bukan chip — satu alur baca vertikal seperti aplikasi sosial. */
.feed-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0 2px;
  scrollbar-width: none;
  position: sticky;
  top: 58px;
  z-index: 6;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.feed-tabs::-webkit-scrollbar {
  display: none;
}

.feed-tabs button {
  position: relative;
  flex: 1 0 auto;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font: 600 .86rem/1 inherit;
  padding: 14px 12px;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}

.feed-tabs button:hover {
  color: var(--navy);
  background: var(--soft);
}

.feed-tabs button.is-active {
  color: var(--navy);
  background: none;
}

.feed-tabs button.is-active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 44px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--navy);
}

.feed-login {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed #cddbea;
  border-radius: var(--radius);
  background: var(--soft);
  color: var(--muted);
  font-size: .88rem;
}

.feed-login .text-link {
  font-weight: 700;
}

/* ------------------------------------------------------------ komposer */

.feed-composer {
  display: grid;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  padding: 16px 12px;
  box-shadow: none;
}

.feed-composer-top {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
}

.feed-composer-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.feed-composer textarea {
  width: 100%;
  border: 0;
  resize: vertical;
  min-height: 76px;
  font: 500 .96rem/1.55 inherit;
  color: var(--ink);
  background: none;
  padding: 2px 0;
}

.feed-composer textarea:focus-visible {
  outline: none;
}

.feed-composer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 9px;
  flex-wrap: wrap;
}

.feed-kinds {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.feed-kinds button {
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 700 .76rem/1 inherit;
  padding: 8px 11px;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.feed-kinds button:hover {
  background: var(--soft);
  color: var(--navy);
}

.feed-kinds button.is-active {
  background: var(--sky);
  border-color: transparent;
  color: var(--blue);
}

.feed-counter {
  font: 700 .74rem/1 inherit;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.feed-counter.is-low {
  color: #b3261e;
}

.feed-composer-extra {
  display: grid;
  gap: 6px;
}

.feed-composer-extra label {
  font: 700 .74rem/1 inherit;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
}

.feed-composer-extra select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--ink);
  font: 600 .88rem/1 inherit;
  padding: 11px 12px;
}

.feed-previews {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.feed-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--soft);
  aspect-ratio: 1;
}

.feed-preview img,
.feed-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feed-preview button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: #0b1d2ecc;
  color: #fff;
  font: 700 1rem/1 inherit;
  cursor: pointer;
}

.feed-preview-busy {
  position: absolute;
  inset: 0;
  background: #0b1d2e99;
}

.feed-preview-busy::after {
  content: '';
  position: absolute;
  inset: 38%;
  border: 2px solid #ffffff5c;
  border-top-color: #fff;
  border-radius: 50%;
  animation: feed-spin .8s linear infinite;
}

@keyframes feed-spin {
  to {
    transform: rotate(360deg);
  }
}

.feed-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.feed-composer-tools {
  display: flex;
  gap: 6px;
}

.feed-composer-tools button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--blue);
  font: 700 .78rem/1 inherit;
  padding: 9px 12px;
  cursor: pointer;
  transition: background .16s ease;
}

.feed-composer-tools button:hover {
  background: var(--sky);
}

.feed-composer-tools svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feed-send {
  border-radius: 999px;
  padding: 11px 22px;
  font-size: .86rem;
}

.feed-note {
  margin: 0;
  padding: 9px 11px;
  border-radius: 11px;
  background: #fdecea;
  color: #8c1d18;
  font-size: .82rem;
  font-weight: 600;
}

.feed-note.is-ok {
  background: #e7f4ec;
  color: var(--green);
}

/* ------------------------------------------------------------- daftar kabar

   Satu kolom kontinu: kabar dipisahkan garis halus, foto kader duduk di jalur
   kiri dan hubungan induk–balasan ditarik ke bawah lewat garis penyambung. */

.feed-list {
  display: grid;
  gap: 0;
}

.feed-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 12px 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  transition: background .16s ease;
}

@media (hover: hover) {
  .feed-card:hover {
    background: #fafcfe;
  }
}

.feed-rail {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  gap: 8px;
}

.feed-sambung {
  width: 2px;
  border-radius: 2px;
  background: none;
}

.feed-card.is-open .feed-sambung {
  background: var(--line);
}

.feed-col {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.feed-author {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.feed-ava {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--blue);
  font: 800 1.02rem/1 inherit;
  overflow: hidden;
  flex: 0 0 auto;
}

.feed-ava.is-small {
  width: 30px;
  height: 30px;
  font-size: .84rem;
}

.feed-ava img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feed-author-name {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.feed-author-name b {
  font-size: .95rem;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-author-name small {
  font-size: .76rem;
  color: var(--muted);
}

/* Penanda jenis kabar yang perlu menonjol: pengumuman dan kegiatan. */
.feed-jenis {
  display: inline-block;
  margin-left: 7px;
  border-radius: 999px;
  background: var(--sky);
  color: var(--blue);
  font: 700 .68rem/1 inherit;
  letter-spacing: .03em;
  padding: 4px 8px;
  vertical-align: middle;
  font-style: normal;
}

/* Nama dan foto kader menuju halaman profilnya, seperti di media sosial lain. */
.feed-author-taut {
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.feed-author-taut:hover b,
.feed-author-taut:focus-visible b {
  text-decoration: underline;
}

.feed-author-ava {
  display: block;
  border-radius: 50%;
  line-height: 0;
}

.feed-author-side {
  position: relative;
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 0 0 auto;
}

.feed-follow {
  border: 1px solid var(--blue);
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font: 700 .74rem/1 inherit;
  padding: 7px 12px;
  cursor: pointer;
}

.feed-follow.is-on,
.feed-card.is-following .feed-follow {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.feed-menu {
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font: 700 1.05rem/1 inherit;
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.feed-menu:hover,
.feed-menu[aria-expanded="true"] {
  background: var(--soft);
  color: var(--navy);
}

.feed-menu-pop {
  position: absolute;
  top: 32px;
  right: 0;
  z-index: 8;
  display: grid;
  gap: 2px;
  min-width: 178px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 14px 30px #102b4924;
}

.feed-menu-pop button {
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: 600 .82rem/1 inherit;
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.feed-menu-pop button:hover {
  background: var(--soft);
}

.feed-menu-pop button.is-danger {
  color: #8c1d18;
}

.feed-menu-pop span {
  font: 700 .76rem/1.4 inherit;
  color: var(--muted);
  padding: 6px 10px;
}

.feed-body {
  display: grid;
  gap: 10px;
}

.feed-text {
  margin: 0;
  font-size: 1.01rem;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.feed-media {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.feed-media[data-count='2'],
.feed-media[data-count='4'] {
  grid-template-columns: 1fr 1fr;
}

.feed-media[data-count='3'] {
  grid-template-columns: 1fr 1fr;
}

.feed-media[data-count='3'] .feed-shot:first-child {
  grid-column: 1 / -1;
}

.feed-shot {
  border: 0;
  padding: 0;
  background: var(--soft);
  cursor: zoom-in;
  display: block;
}

.feed-shot img,
.feed-media video {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* Satu gambar tampil lebih besar supaya isinya masih terbaca. */
.feed-media[data-count='1'] .feed-shot img {
  aspect-ratio: 4 / 3;
}

.feed-media.is-video video {
  aspect-ratio: 16 / 9;
  background: #000;
}

.feed-event {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  text-decoration: none;
  color: inherit;
  background: var(--soft);
}

.feed-event:hover {
  border-color: #b9d8f0;
}

.feed-event-cover img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.feed-event-copy {
  display: grid;
  gap: 3px;
  align-content: start;
}

.feed-event-copy b {
  font-size: .92rem;
  color: var(--navy);
  line-height: 1.32;
}

.feed-event-copy small {
  font-size: .76rem;
  color: var(--muted);
}

.feed-event-copy p {
  margin: 2px 0 0;
  font-size: .8rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-event-cta {
  margin-top: 4px;
  font: 700 .78rem/1 inherit;
  color: var(--blue);
}

.feed-origin {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 12px;
  padding: 11px 12px;
  background: var(--soft);
}

.feed-origin-label {
  font: 700 .7rem/1 inherit;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

.feed-origin b {
  font-size: .88rem;
  color: var(--navy);
}

.feed-origin p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  white-space: pre-line;
}

.feed-origin .feed-event,
.feed-origin .feed-media {
  background: #fff;
}

.feed-editing textarea {
  width: 100%;
  border: 1px solid #b5d9f4;
  border-radius: 12px;
  padding: 11px;
  font: 500 .93rem/1.6 inherit;
  color: var(--ink);
  min-height: 92px;
  resize: vertical;
}

.feed-editing-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

/* ------------------------------------------------------ bar interaksi

   Ikon bulat rata kiri dengan angkanya masing-masing; penyimpanan ditonjolkan
   ke ujung kanan supaya bar tidak terasa seperti tombol lebar. */

.feed-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 -8px;
  border-top: 0;
  padding-top: 0;
}

.feed-actions > button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 600 .8rem/1 inherit;
  font-variant-numeric: tabular-nums;
  padding: 9px 10px;
  min-width: 40px;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.feed-actions > button:hover {
  background: var(--soft);
  color: var(--navy);
}

.feed-actions > button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.feed-actions svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feed-save {
  margin-left: auto;
}

.feed-like.is-on {
  color: #c0334d;
}

.feed-like.is-on svg {
  fill: #c0334d;
  stroke: #c0334d;
}

.feed-save.is-on svg {
  fill: var(--blue);
  stroke: var(--blue);
}

.feed-repost.is-on {
  color: var(--green);
}

.feed-like.is-pop svg {
  animation: feed-pop .32s ease;
}

@keyframes feed-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.28);
  }
  100% {
    transform: scale(1);
  }
}

/* ---------------------------------------------------------------- utas */

.feed-thread {
  border-top: 0;
  padding-top: 0;
}

.feed-thread-inner {
  display: grid;
  gap: 12px;
  border-radius: 14px;
  background: var(--soft);
  padding: 12px;
}

.feed-thread-head {
  display: grid;
  gap: 2px;
  margin: 0;
}

.feed-thread-head b {
  font-size: .84rem;
  color: var(--navy);
}

.feed-thread-head span {
  font-size: .74rem;
  color: var(--muted);
}

.feed-comments {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.feed-comment {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 9px;
}

.feed-comment.is-reply {
  margin-left: 39px;
  padding-left: 9px;
  border-left: 2px solid var(--line);
}

.feed-comment b {
  font-size: .84rem;
  color: var(--navy);
}

.feed-comment b small {
  color: var(--blue);
  font-weight: 700;
}

.feed-comment p {
  margin: 2px 0;
  font-size: .89rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.feed-comment small {
  font-size: .72rem;
  color: var(--muted);
}

.feed-reply-to {
  border: 0;
  background: none;
  color: var(--blue);
  font: 700 .72rem/1 inherit;
  padding: 3px 0 0;
  cursor: pointer;
}

.feed-reply-to.is-on {
  color: var(--navy);
}

.feed-empty-comment {
  font-size: .82rem;
  color: var(--muted);
}

.feed-reply {
  display: flex;
  align-items: center;
  gap: 8px;
}

.feed-reply .feed-ava {
  background: #fff;
}

.feed-reply input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 500 .88rem/1 inherit;
  padding: 11px 15px;
}

.feed-reply input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.feed-reply .button {
  padding: 10px 16px;
  font-size: .8rem;
}

/* ------------------------------------------------------- keadaan halaman */

.feed-skeleton {
  display: grid;
  gap: 12px;
}

.feed-skeleton .skeleton {
  height: 128px;
  border-radius: var(--radius);
}

.feed-empty {
  margin: 0;
  padding: 22px 16px;
  border: 1px dashed #cddbea;
  border-radius: var(--radius);
  text-align: center;
  font-size: .9rem;
}

.feed-more,
#feedMore {
  justify-self: center;
}

.feed-loadstate {
  min-height: 18px;
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
}

.feed-toast {
  display: inline-block;
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 11px;
  background: var(--navy);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
}

.feed-lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: #061524e8;
  padding: 18px;
}

.feed-lightbox img {
  max-width: 100%;
  /* `max-height: 100%` tidak pernah mengikat di kisi ini, jadi batasnya
     dihitung dari tinggi layar dikurangi isi padding wadah (18px x 2).
     Tanpa itu, foto landskap lebar bisa menjulang lewat bawah layar. */
  max-height: calc(100dvh - 36px);
  border-radius: 12px;
  object-fit: contain;
}

.feed-lightbox-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #ffffff26;
  color: #fff;
  cursor: pointer;
}

.feed-lightbox-close::after {
  content: '×';
  font: 700 1.5rem/1 inherit;
}

body.feed-zoomed {
  overflow: hidden;
}

/* Unsur yang sedang disembunyikan harus benar-benar hilang: kelas di atas
   mengatur display-nya sendiri, jadi aturan bawaan peramban perlu ditegaskan. */
.feed-page [hidden],
.feed-thread[hidden],
.feed-note[hidden],
.feed-lightbox[hidden] {
  display: none !important;
}

@media (min-width: 681px) {
  .feed-board {
    gap: 18px;
    padding-top: 30px;
  }

  .feed-head {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .feed-tabs {
    top: 64px;
  }

  .feed-card {
    padding-inline: 16px;
  }
}

@media (max-width: 680px) {
  .feed-board {
    gap: 13px;
  }

  .feed-card {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 14px 10px 6px;
  }

  .feed-ava {
    width: 38px;
    height: 38px;
    font-size: .95rem;
  }

  .feed-media[data-count='2'] video,
  .feed-media[data-count='3'] video,
  .feed-media[data-count='4'] video {
    aspect-ratio: 4 / 3;
  }

  .feed-previews {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .feed-actions > button {
    font-size: .76rem;
    padding: 9px 8px;
  }

  .feed-comment.is-reply {
    margin-left: 20px;
  }
}

/* --------------------------------------------------------- gerak & poles */

/* Permukaan yang dulu berubah seketika saat disentuh kini bertransisi halus.
   Sengaja hanya warna, latar, garis, bayangan, dan opacity — tidak ada
   transform, padding, atau margin — supaya posisi yang diukur skrip
   (perpustakaan.js, tanya.js, ibadah.js) tidak pernah ikut bergerak. */
a,
button,
.text-link,
.pillar-card,
.gallery-item,
.footer-links a,
.admin-link,
.nav-more,
.reader-bar button,
.account-slot .account-button,
.account-menu-item,
.account-signout,
.globe-fallback-actions button,
.globe-help button,
.location-detect,
.acara-calendar,
.tanya-stop,
.tanya-act.is-unduh,
.tanya-sumber-buka,
.tanya-sumber-web li a,
.tanya-riwayat-act.is-bahaya,
.tanya-sorot-bentang,
.profil-angka-item,
.profil-kabar-taut,
.feed-author-taut,
.feed-menu-pop button,
.feed-event {
  transition: background-color var(--laju-1) var(--ease),
    border-color var(--laju-1) var(--ease),
    color var(--laju-1) var(--ease),
    box-shadow var(--laju-2) var(--ease),
    opacity var(--laju-2) var(--ease);
}

/* Umpan tekan: redup sejenak, tanpa mengubah ukuran tombol. */
.button:active,
.install-app:active,
.nav-masuk:active,
.nav-more:active,
.tanya-submit:active,
.tanya-stop:active,
.reader-bar button:active,
.feed-actions > button:active,
.feed-like:active,
.acara-like:active,
.acara-share:active,
.profil-ikuti:active,
.account-menu-item:active,
.globe-icon-btn:active {
  opacity: .8;
}

@keyframes muncul {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Kartu hasil pencarian, kabar baru, dan muat berikutnya muncul diam-diam.
   Hanya kelas yang disisipkan skrip setelah data datang; kartu halaman utama
   (.article-card, .pillar-card, .teaser-card, .gallery-item) sudah diatur
   kelas .reveal oleh site.js, jadi tidak boleh dianimasikan dua kali.
   `backwards` dipakai supaya setelah animasi selesai gaya alami (termasuk
   translateY pada :hover) kembali berlaku dan tidak tertimpa animasi. */
.feed-card,
.acara-card,
.perp-card {
  animation: muncul var(--laju-3) var(--ease) backwards;
}

/* Zoom halus pada pratinjau galeri. */
.gallery-item img {
  transition: transform var(--laju-3) var(--ease);
}

/* Menu akun dan kartu aksi umpan dulu muncul mendadak (display:none lalu
   ada, atau node baru disisipkan). Animasi masuk yang singkat membuat arah
   kemunculannya terbaca. */
.account-slot.is-open .account-menu,
.feed-menu-pop {
  animation: muncul var(--laju-2) var(--ease) backwards;
}

/* Utas komentar dibuka lewat atribut hidden sehingga tidak kena transisi.
   Dipakai fade tanpa geser: feed.js dan acara.js menghitung posisi
   scrollIntoView tepat setelah panel terbuka, jadi posisinya tidak boleh
   pernah berpindah selama animasi. .acara-thread sudah punya thread-open
   sendiri dan tidak ditimpa di sini. */
@keyframes munculDiam {
  from {
    opacity: 0;
  }
}

.feed-thread:not([hidden]) {
  animation: munculDiam var(--laju-2) var(--ease) backwards;
}

.feed-comment,
.acara-comment {
  animation: munculDiam var(--laju-2) var(--ease) backwards;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
  }
}