/* =======================
   SATU NAPAS — RITUAL SUNYI
   ======================= */
#sunyi-ritus {
  position: fixed;
  inset: 0;
  background: rgba(240, 240, 240, 0.75);
  backdrop-filter: blur(7px) brightness(0.94);
  -webkit-backdrop-filter: blur(7px) brightness(0.94);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  z-index: 999999;
  transition: opacity .65s ease;
}
/* aktif */
#sunyi-ritus.show {
  opacity: 1;
  pointer-events: auto;
}
/* grain tipis */
#sunyi-ritus::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 1200 1200'%3E%3Crect width='1200' height='1200' fill='none'/%3E%3Cg fill='%23000' fill-opacity='0.35'%3E%3Ccircle cx='90' cy='90' r='1'/%3E%3C/g%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
/* konten */
.ritus-wrap {
  text-align: center;
  max-width: 520px;
  font-family: "Cormorant Garamond", serif;
  color: #111;
  padding: 42px 48px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 22px;
}
/* garis napas (pelan sekali) */
.ritus-line {
  margin-bottom: 14px;
  line-height: 1.65;
  font-size: 20px;
  opacity: 0;
  animation: ritusLine 1.4s ease forwards;
}
@keyframes ritusLine {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* napas pembuka */
.ritus-breath {
  font-size: 16px;
  opacity: 0;
  animation: ritusBreath 1.6s ease forwards;
}
@keyframes ritusBreath {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* inti quote */
.ritus-quote {
  font-size: 22px;
  font-weight: 400;
  margin-top: 6px;
  opacity: 0;
  animation: ritusQuote 1.7s ease .25s forwards;
}
@keyframes ritusQuote {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: .98;
    transform: translateY(0);
  }
}
/* credit pelan seperti doa */
.ritus-credit {
  font-size: 13px;
  margin-top: 18px;
  opacity: 0;
  font-style: italic;
  color: #444;
  animation: ritusCredit 2.8s ease 1.1s forwards;
}
@keyframes ritusCredit {
  from {
    opacity: 0;
  }
  to {
    opacity: .7;
  }
}
.ritus-credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.35);
}

/* =======================
   LATIHAN SUNYI
   ======================= */
button.btn-latihan-sunyi {
  background: #FFF;
  padding: 3px 6px;
  border-radius: var(--ss-radius-sm);
  border: 0px solid #CCC;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
button.btn-latihan-sunyi:hover {
  text-decoration: underline;
}
button.btn-latihan-sunyi.active {
  text-decoration: underline;
}

   /* =========================================================
   Sistem Sunyi — Tentang Sistem Sunyi Popup (teks pengantar ringkas)
   Prefix: ss-tssp-
   Minimal, rapi, dan responsif
   ========================================================= */
/* Wrapper */
.ss-tssp {
  padding: 6px 0;
}
/* Teks dasar */
.ss-tssp p.tss {
  margin: 0 0 14px;
  line-height: 1.75;
  color: #444;
  font-size: 16px;
}
/* Spasi paragraf terakhir sebelum blok link */
.ss-tssp p.tss:last-of-type {
  margin-bottom: 16px;
}
/* Bold / strong */
.ss-tssp strong {
  font-weight: 700;
  color: #444;
}
/* Link */
.ss-tssp a {
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid rgba(192, 24, 24, 0.28);
  padding-bottom: 1px;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.ss-tssp a:hover {
  border-bottom-color: #333;
  opacity: .96;
}
/* Block: Baca Selengkapnya */
.ss-tssp-more {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 12px;
  background: #f4f4f4;
}
.ss-tssp-more strong {
  display: block;
  margin-bottom: 6px;
}
/* Signature */
.ss-tssp-sign {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #111;
}
/* Mobile: sedikit lebih rapat */
@media (max-width: 768px) {
  .ss-tssp {
    padding: 2px 0;
  }
  .ss-tssp p {
    font-size: 14.5px;
    line-height: 1.7;
    margin-bottom: 12px;
  }
  .ss-tssp-more {
    padding: 11px 12px;
    border-radius: 11px;
  }
}
   
   /* =========================================================
   Sistem Sunyi FAQ Context Panel (Insert HTML)
   ========================================================= */
.ss-faq {
  max-width: 780px;
  margin: 2em auto;
  line-height: 1.6;
}
.ss-faq h3 {
  margin-top: 3em!important;
  font-size: 1.15em!important;
  letter-spacing: 0.02em!important;
}
.ss-faq ol {
  padding-left: 1.4em!important;
}
.ss-faq ol li {
  margin-bottom: 1.5em!important;
}
.ss-faq strong {
  font-weight: 600;
}
.ss-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8em 0;
  font-size: 0.95em;
}
.ss-table th,
.ss-table td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
  padding: 6px 4px!important;
  text-align: left!important;
}
.ss-faq ul {
  margin: 0.6em 0 0.6em 1em!important;
}