.announcement-viewport {
  position: fixed;
  z-index: 1000;
  inset: auto 1rem max(1rem, env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  gap: .7rem;
  width: auto;
  max-height: min(42vh, 360px);
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  pointer-events: none;
}

.announcement-viewport[hidden] {
  display: none;
}

.announcement-item {
  position: relative;
  box-sizing: border-box;
  width: min(760px, 100%);
  margin: 0;
  padding: 1.05rem 3.4rem 1.05rem 1.2rem;
  border: 1px solid #c8e1d6;
  border-radius: 1.1rem;
  color: #173b31;
  background: linear-gradient(135deg, #ffffff 0%, #effaf4 100%);
  box-shadow: 0 16px 42px rgb(0 30 23 / 24%);
  overflow: hidden;
  text-align: left;
  pointer-events: auto;
  animation: announcement-appear .3s ease-out both;
}

.announcement-item h2 {
  margin: 0 0 .4rem;
  font-size: 1.05rem;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: -.015em;
}

.announcement-item p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.announcement-item a {
  display: inline-block;
  margin-top: .65rem;
  color: #075e4f;
  font-weight: 800;
  text-underline-offset: 3px;
}

.announcement-dismiss {
  position: absolute;
  z-index: 3;
  top: .65rem;
  right: .65rem;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border: 1px solid rgb(7 94 79 / 14%);
  border-radius: 50%;
  background: rgb(7 94 79 / 9%);
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  transition: background .18s ease, transform .18s ease;
}

.announcement-dismiss:hover {
  background: rgb(7 94 79 / 17%);
  transform: scale(1.05);
}

.announcement-dismiss:focus-visible {
  outline: 3px solid #e7bd4d;
  outline-offset: 3px;
}

/* Pita berjalan: judul dan isi berada dalam viewport yang terpotong. */
.announcement-ticker {
  padding: .95rem 3.4rem .95rem 1.15rem;
  border: 1px solid rgb(255 255 255 / 18%);
  border-left: 4px solid #f5cf63;
  border-radius: 1rem;
  color: #f5fff9;
  background: linear-gradient(120deg, #073d35 0%, #0b5b4d 65%, #10705c 100%);
  box-shadow: 0 16px 42px rgb(0 30 23 / 30%);
}

.announcement-ticker .announcement-dismiss {
  border-color: rgb(255 255 255 / 22%);
  background: rgb(255 255 255 / 10%);
  color: #fff;
}

.announcement-ticker .announcement-dismiss:hover {
  background: rgb(255 255 255 / 21%);
}

.announcement-ticker-viewport {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.announcement-ticker-track {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: max-content;
  max-width: none;
  margin: 0;
  white-space: nowrap;
  overflow-wrap: normal;
  animation: announcement-scroll 30s linear infinite;
}

.announcement-ticker-track strong {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
  padding: .32rem .72rem;
  border: 1px solid rgb(245 207 99 / 45%);
  border-radius: 999px;
  color: #183d32;
  background: #f5cf63;
  font-size: .83rem;
  font-weight: 850;
  line-height: 1.4;
}

.announcement-ticker-track span {
  flex: 0 0 auto;
  color: #f5fff9;
  font-size: .94rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.announcement-ticker-viewport:hover .announcement-ticker-track {
  animation-play-state: paused;
}

@keyframes announcement-scroll {
  from { transform: translateX(100vw); }
  to { transform: translateX(-100%); }
}

@keyframes announcement-appear {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .announcement-item {
    animation: none;
  }

  .announcement-ticker-track {
    width: auto;
    max-width: 100%;
    flex-wrap: wrap;
    white-space: normal;
    animation: none;
  }

  .announcement-ticker-track span {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 520px) {
  .announcement-viewport {
    inset-inline: .65rem;
    bottom: max(.65rem, env(safe-area-inset-bottom));
    max-height: min(45vh, 360px);
  }

  .announcement-item {
    width: 100%;
    padding: .9rem 3rem .9rem .95rem;
    border-radius: .9rem;
  }

  .announcement-item h2 {
    font-size: 1rem;
  }

  .announcement-item p {
    font-size: .9rem;
  }

  .announcement-ticker {
    padding: .85rem 3rem .85rem .95rem;
  }

  .announcement-ticker-track {
    gap: .6rem;
    animation-duration: 34s;
  }

  .announcement-ticker-track strong {
    font-size: .78rem;
  }

  .announcement-ticker-track span {
    font-size: .88rem;
  }

  .announcement-dismiss {
    top: .55rem;
    right: .55rem;
    width: 2rem;
    height: 2rem;
  }
}

/* ANNOUNCEMENT-COMPACT-TICKER-V3: notifikasi ringkas, tidak menutupi bagian tengah halaman */
.announcement-viewport .announcement-ticker {
  justify-self: end;
  width: min(420px, 100%);
  max-width: 100%;
  padding: .68rem 2.75rem .68rem .85rem;
  border-radius: .88rem;
}

.announcement-viewport .announcement-ticker .announcement-ticker-track {
  gap: .55rem;
  animation-duration: 32s;
}

.announcement-viewport .announcement-ticker .announcement-ticker-track strong {
  padding: .25rem .62rem;
  font-size: .78rem;
}

.announcement-viewport .announcement-ticker .announcement-ticker-track span {
  font-size: .88rem;
}

.announcement-viewport .announcement-ticker .announcement-dismiss {
  top: .42rem;
  right: .42rem;
  width: 1.85rem;
  height: 1.85rem;
}

@media (max-width: 520px) {
  .announcement-viewport .announcement-ticker {
    width: min(420px, 100%);
    padding: .62rem 2.55rem .62rem .72rem;
    border-radius: .8rem;
  }

  .announcement-viewport .announcement-ticker .announcement-ticker-track {
    animation-duration: 34s;
  }

  .announcement-viewport .announcement-ticker .announcement-dismiss {
    top: .38rem;
    right: .38rem;
    width: 1.8rem;
    height: 1.8rem;
  }
}

/* ANNOUNCEMENT-TOAST-REFINEMENT-V4 */
.announcement-viewport {
  position: fixed !important;
  inset: auto .9rem max(.9rem, env(safe-area-inset-bottom)) auto !important;
  box-sizing: border-box;
  width: min(390px, calc(100vw - 1.8rem)) !important;
  max-height: min(55vh, 420px) !important;
  display: grid;
  justify-items: stretch;
  align-content: start;
  gap: .65rem;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 !important;
}

.announcement-viewport[hidden] {
  display: none !important;
}

.announcement-viewport .announcement-item {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin: 0;
  padding: .95rem 3rem .95rem 1rem;
  border: 1px solid rgb(11 93 76 / 16%);
  border-left: 3px solid #e7bd4d;
  border-radius: 1rem;
  color: #173b31;
  background: linear-gradient(135deg, rgb(255 255 255 / 98%), rgb(239 250 244 / 98%));
  box-shadow: 0 12px 34px rgb(0 30 23 / 17%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: left;
}

.announcement-viewport .announcement-item h2 {
  margin: 0 0 .4rem;
  padding: 0;
  color: #103f33;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.015em;
}

.announcement-viewport .announcement-item h2::before {
  content: "";
  display: inline-block;
  width: .48rem;
  height: .48rem;
  margin: 0 .5rem .08rem 0;
  border-radius: 50%;
  background: #d6ac3e;
  box-shadow: 0 0 0 3px rgb(231 189 77 / 18%);
  vertical-align: middle;
}

.announcement-viewport .announcement-item p {
  margin: 0;
  color: #304f45;
  font-size: .9rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.announcement-viewport .announcement-item a {
  display: inline-block;
  margin-top: .55rem;
  color: #075e4f;
  font-weight: 800;
  text-underline-offset: 3px;
}

.announcement-viewport .announcement-dismiss {
  z-index: 4;
  top: .5rem;
  right: .5rem;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid rgb(7 94 79 / 13%);
  border-radius: 50%;
  background: rgb(7 94 79 / 7%);
  color: #17483b;
  font-size: 1.2rem;
  line-height: 1;
  transition: background .18s ease, transform .18s ease;
}

.announcement-viewport .announcement-dismiss:hover {
  background: rgb(7 94 79 / 15%);
  transform: scale(1.04);
}

.announcement-viewport .announcement-dismiss:focus-visible {
  outline: 3px solid #e7bd4d;
  outline-offset: 3px;
}

/* Mode pita berjalan tetap berwarna hijau, tetapi mengikuti kartu ringkas. */
.announcement-viewport .announcement-ticker {
  padding: .78rem 2.8rem .78rem .85rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-left: 3px solid #e7bd4d;
  border-radius: .9rem;
  color: #f5fff9;
  background: linear-gradient(135deg, #073d35, #0b5b4d 72%, #10705c);
  box-shadow: 0 12px 34px rgb(0 30 23 / 22%);
}

.announcement-viewport .announcement-ticker h2 {
  color: #fff;
}

.announcement-viewport .announcement-ticker .announcement-dismiss {
  top: .42rem;
  right: .42rem;
  width: 1.85rem;
  height: 1.85rem;
  border-color: rgb(255 255 255 / 20%);
  background: rgb(255 255 255 / 10%);
  color: #fff;
}

.announcement-viewport .announcement-ticker-viewport {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.announcement-viewport .announcement-ticker-track {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: max-content;
  max-width: none;
  margin: 0;
  white-space: nowrap;
  animation-duration: 32s;
}

.announcement-viewport .announcement-ticker-track strong {
  flex: 0 0 auto;
  margin: 0;
  padding: .25rem .62rem;
  border: 1px solid rgb(245 207 99 / 42%);
  border-radius: 999px;
  color: #183d32;
  background: #f5cf63;
  font-size: .78rem;
  font-weight: 850;
  line-height: 1.4;
}

.announcement-viewport .announcement-ticker-track span {
  flex: 0 0 auto;
  color: #f5fff9;
  font-size: .88rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.announcement-viewport .announcement-ticker-viewport:hover .announcement-ticker-track {
  animation-play-state: paused;
}

@media (max-width: 520px) {
  .announcement-viewport {
    inset: auto .65rem max(.65rem, env(safe-area-inset-bottom)) auto !important;
    width: calc(100vw - 1.3rem) !important;
    max-height: min(55vh, 420px) !important;
    gap: .55rem;
  }

  .announcement-viewport .announcement-item {
    padding: .85rem 2.75rem .85rem .85rem;
    border-radius: .88rem;
  }

  .announcement-viewport .announcement-item h2 {
    font-size: .98rem;
  }

  .announcement-viewport .announcement-item p {
    font-size: .88rem;
  }

  .announcement-viewport .announcement-dismiss {
    top: .43rem;
    right: .43rem;
    width: 1.8rem;
    height: 1.8rem;
  }

  .announcement-viewport .announcement-ticker {
    padding: .7rem 2.55rem .7rem .72rem;
  }

  .announcement-viewport .announcement-ticker-track {
    animation-duration: 34s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .announcement-viewport .announcement-item {
    animation: none;
  }

  .announcement-viewport .announcement-ticker-track {
    width: auto;
    max-width: 100%;
    flex-wrap: wrap;
    white-space: normal;
    animation: none;
  }

  .announcement-viewport .announcement-ticker-track span {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

/* E-TAHFIDZ CLASSIC SCROLL ANNOUNCEMENT 2026-11-02
   Dialog pengumuman berbentuk gulungan kertas klasik.
   Kartu ajakan push notification tidak terpengaruh. */

.announcement-viewport {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200 !important;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  max-height: none !important;
  min-height: 0 !important;

  padding:
    clamp(36px, 6vh, 58px)
    max(16px, env(safe-area-inset-right))
    clamp(36px, 6vh, 58px)
    max(16px, env(safe-area-inset-left));

  gap: 1rem;
  background: rgb(5 13 12 / 66%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);

  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgb(218 184 112 / 75%) transparent;
}

.announcement-viewport[hidden] {
  display: none !important;
}

.announcement-viewport .announcement-item {
  position: relative !important;
  isolation: isolate;
  flex: 0 0 auto;

  width: min(100%, 680px);
  max-height: min(84dvh, 760px);
  margin: auto;

  padding: clamp(2.2rem, 4vh, 2.8rem)
    clamp(1.35rem, 5vw, 3rem)
    clamp(2rem, 3.5vh, 2.5rem);

  border: 1px solid #c6a66a;
  border-radius: .5rem;
  color: #59462d;

  background-color: #f3e8c9;
  background-image:
    radial-gradient(ellipse at 15% 12%, rgb(255 255 255 / 48%), transparent 36%),
    radial-gradient(ellipse at 85% 88%, rgb(191 155 91 / 14%), transparent 38%),
    repeating-linear-gradient(
      0deg,
      rgb(124 91 46 / 2%) 0,
      rgb(124 91 46 / 2%) 1px,
      transparent 1px,
      transparent 5px
    ),
    linear-gradient(135deg, #fbf1d9 0%, #efe0bb 48%, #f8edcf 100%);

  box-shadow:
    0 24px 65px rgb(0 0 0 / 38%),
    inset 0 0 0 5px rgb(255 255 255 / 23%),
    inset 0 0 24px rgb(139 100 49 / 12%);

  overflow: visible !important;
  animation: announcement-scroll-unfurl .42s cubic-bezier(.2, .8, .2, 1) both;
}

/* Batang gulungan atas dan bawah. */
.announcement-viewport .announcement-item::before,
.announcement-viewport .announcement-item::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: -9px;
  right: -9px;
  height: 22px;

  border: 1px solid #9b783f;
  border-radius: 999px;

  background:
    radial-gradient(circle at 12px 50%, #fff0b7 0 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) 50%, #fff0b7 0 3px, transparent 4px),
    linear-gradient(
      180deg,
      #795a30 0%,
      #e6ca88 22%,
      #f5e0a5 43%,
      #b48c4b 68%,
      #72512b 100%
    );

  box-shadow:
    0 3px 6px rgb(65 43 17 / 25%),
    inset 0 1px 2px rgb(255 255 255 / 48%);
}

.announcement-viewport .announcement-item::before {
  top: -11px;
}

.announcement-viewport .announcement-item::after {
  bottom: -11px;
}

.announcement-viewport .announcement-item h2 {
  position: relative;
  z-index: 2;

  margin: 0 1.8rem 1.25rem;
  color: #624a28;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 3vw, 1.55rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .025em;
  text-align: center;
  text-wrap: balance;

  text-shadow: 0 1px 0 rgb(255 255 255 / 60%);
}

.announcement-viewport .announcement-item h2::before {
  content: none !important;
}

.announcement-viewport .announcement-item p {
  position: relative;
  z-index: 2;

  max-height: min(52dvh, 440px);
  margin: 0;
  padding: .75rem .5rem .85rem;

  border-top: 1px solid rgb(143 111 65 / 25%);
  border-bottom: 1px solid rgb(143 111 65 / 25%);

  color: #594a34;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.92rem, 2.1vw, 1.02rem);
  line-height: 1.75;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;

  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #b49a68 transparent;
}

.announcement-viewport .announcement-item p::-webkit-scrollbar {
  width: 7px;
}

.announcement-viewport .announcement-item p::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background: #b49a68;
}

.announcement-viewport .announcement-item a {
  position: relative;
  z-index: 2;

  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 1rem auto 0;
  padding: .6rem 1.1rem;

  border: 1px solid #9c7b46;
  border-radius: .35rem;
  color: #584326;
  background: linear-gradient(135deg, #fff0c4, #e5c77f);

  font-family: Georgia, "Times New Roman", serif;
  font-size: .9rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 3px 8px rgb(92 65 25 / 13%);
}

.announcement-viewport .announcement-item a:hover {
  background: #ffe6a2;
  box-shadow: 0 5px 12px rgb(92 65 25 / 19%);
}

.announcement-viewport .announcement-dismiss {
  position: absolute;
  z-index: 4;
  top: 1.05rem;
  right: 1.1rem;

  width: 2rem;
  height: 2rem;
  border: 1px solid rgb(139 103 48 / 45%);
  border-radius: 50%;

  color: #654a27;
  background: rgb(255 246 222 / 85%);
  box-shadow: 0 2px 6px rgb(76 52 20 / 12%);

  font-family: Arial, sans-serif;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.announcement-viewport .announcement-dismiss:hover {
  color: #3e2d18;
  background: #ffe7a6;
}

.announcement-viewport .announcement-dismiss:focus-visible {
  outline: 3px solid #a17a37;
  outline-offset: 3px;
}

/* Mode ticker tetap memakai data dan struktur lama,
   tetapi disajikan statis di atas kertas agar teks terbaca. */
.announcement-viewport .announcement-item.announcement-ticker {
  border-color: #c6a66a;
  color: #59462d;
  background-color: #f3e8c9;
  background-image:
    radial-gradient(ellipse at 15% 12%, rgb(255 255 255 / 48%), transparent 36%),
    repeating-linear-gradient(0deg, rgb(124 91 46 / 2%) 0, rgb(124 91 46 / 2%) 1px, transparent 1px, transparent 5px),
    linear-gradient(135deg, #fbf1d9 0%, #efe0bb 48%, #f8edcf 100%);
}

.announcement-viewport .announcement-item.announcement-ticker .announcement-ticker-viewport {
  max-height: min(52dvh, 440px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.announcement-viewport .announcement-item.announcement-ticker .announcement-ticker-track {
  display: block;
  width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  animation: none !important;
  transform: none !important;
}

.announcement-viewport .announcement-item.announcement-ticker .announcement-ticker-track strong {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1rem;
  padding: .25rem .7rem;

  border: 1px solid rgb(156 123 70 / 40%);
  border-radius: .3rem;
  color: #624a28;
  background: rgb(255 240 193 / 70%);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  white-space: normal;
}

.announcement-viewport .announcement-item.announcement-ticker .announcement-ticker-track span {
  display: block;
  padding: .75rem .5rem;
  border-top: 1px solid rgb(143 111 65 / 25%);
  color: #594a34;

  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@keyframes announcement-scroll-unfurl {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 520px) {
  .announcement-viewport {
    padding:
      max(34px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(34px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .announcement-viewport .announcement-item {
    width: 100%;
    max-height: 84dvh;
    padding: 2rem 1.15rem 1.9rem;
    border-radius: .4rem;
  }

  .announcement-viewport .announcement-item h2 {
    margin: 0 1.65rem 1rem;
    font-size: 1.12rem;
  }

  .announcement-viewport .announcement-item p,
  .announcement-viewport .announcement-item.announcement-ticker .announcement-ticker-viewport {
    max-height: min(48dvh, 390px);
  }

  .announcement-viewport .announcement-dismiss {
    top: .9rem;
    right: .95rem;
    width: 1.85rem;
    height: 1.85rem;
  }

  .announcement-viewport .announcement-item::before,
  .announcement-viewport .announcement-item::after {
    left: -6px;
    right: -6px;
    height: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .announcement-viewport .announcement-item {
    animation: none !important;
  }
}

/* E-TAHFIDZ SCROLL PRESENTATION V8 */
.announcement-viewport {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding:
    max(34px, env(safe-area-inset-top))
    max(32px, env(safe-area-inset-right))
    max(34px, env(safe-area-inset-bottom))
    max(32px, env(safe-area-inset-left)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: rgb(8 12 10 / 72%) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: auto !important;
}

.announcement-viewport[hidden] {
  display: none !important;
}

.announcement-viewport .announcement-item {
  flex: 0 1 auto !important;
  width: min(680px, calc(100vw - 64px)) !important;
  max-width: 680px !important;
  max-height: min(78dvh, 700px) !important;
  margin: auto !important;
  transform-origin: 50% 0%;
}

/* Animasi membuka: lembar turun dari batang atas. */
@keyframes announcement-scroll-unfurl {
  0% {
    opacity: 0;
    transform: perspective(1200px) rotateX(-8deg) scaleY(.06);
    filter: brightness(.78);
  }
  58% {
    opacity: 1;
    transform: perspective(1200px) rotateX(2deg) scaleY(1.025);
    filter: brightness(1.03);
  }
  100% {
    opacity: 1;
    transform: perspective(1200px) rotateX(0deg) scaleY(1);
    filter: brightness(1);
  }
}

/* Penutupan: lembar memadat ke tengah menjadi satu gulungan. */
.announcement-viewport .announcement-item.is-closing {
  pointer-events: none !important;
  transform-origin: 50% 50%;
  animation: announcement-scroll-close 680ms cubic-bezier(.42, 0, .2, 1) forwards !important;
}

.announcement-viewport .announcement-item.is-closing::before {
  z-index: 5;
  animation: announcement-scroll-top-roll 680ms cubic-bezier(.42, 0, .2, 1) forwards;
}

.announcement-viewport .announcement-item.is-closing::after {
  z-index: 5;
  animation: announcement-scroll-bottom-roll 680ms cubic-bezier(.42, 0, .2, 1) forwards;
}

@keyframes announcement-scroll-close {
  0% {
    opacity: 1;
    transform: perspective(1200px) rotateX(0deg) scaleY(1);
    filter: brightness(1);
  }
  42% {
    opacity: 1;
    transform: perspective(1200px) rotateX(-3deg) scaleY(.68);
    filter: brightness(.96);
  }
  72% {
    opacity: .92;
    transform: perspective(1200px) rotateX(-5deg) scaleY(.28);
    filter: brightness(.87);
  }
  100% {
    opacity: .65;
    transform: perspective(1200px) rotateX(-6deg) scaleY(.055);
    filter: brightness(.78);
  }
}

@keyframes announcement-scroll-top-roll {
  0% {
    top: -11px;
    transform: scaleY(1);
  }
  48% {
    top: calc(50% - 11px);
    transform: scaleY(1.25);
  }
  100% {
    top: calc(50% - 11px);
    transform: scaleY(9);
  }
}

@keyframes announcement-scroll-bottom-roll {
  0% {
    bottom: -11px;
    transform: scaleY(1);
  }
  48% {
    bottom: calc(50% - 11px);
    transform: scaleY(1.25);
  }
  100% {
    bottom: calc(50% - 11px);
    transform: scaleY(9);
  }
}

@media (max-width: 520px) {
  .announcement-viewport {
    padding:
      max(28px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(28px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left)) !important;
  }

  .announcement-viewport .announcement-item {
    width: calc(100vw - 56px) !important;
    max-width: 680px !important;
    max-height: min(78dvh, 700px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .announcement-viewport .announcement-item,
  .announcement-viewport .announcement-item::before,
  .announcement-viewport .announcement-item::after {
    animation: none !important;
  }
}