.announcement-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background-color: rgba(0, 0, 0, 0.8);
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 9999;
 transition: opacity 0.6s ease;
}

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

.announcement-content {
 position: relative;
 max-width: 90%;
 max-height: 90%;
 width: 60%;
 height: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 1rem;
}

.announcement-body {
 position: relative;
 flex: 1;
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 overflow: hidden;
 padding: 1.5rem 1rem;
 background: #111;
 border-radius: 10px;
 box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
 color: white;
 justify-content: space-between;
}

.page-wrapper {
 flex: 1;
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
}

#announcement-title {
 font-size: 1.3rem;
 margin-bottom: 1rem;
 text-align: center;
 width: 100%;
}

#announcement-pages {
 position: relative;
}

#announcement-pages>div {
 display: none;
 width: 100%;
 max-width: 100%;
 max-height: 100%;
 text-align: center;
}

#announcement-pages>.active {
 display: block;
}

#announcement-pages img,
#announcement-pages video {
 max-width: 100%;
 height: auto;
 margin: 1rem auto;
 border-radius: 10px;
}

#announcement-pages img.full,
#announcement-pages video.full {
 top: 0px;
 max-width: 50%;
 height: auto;
 margin: 1rem auto;
 position: relative;
}

#announcement-pages p {
 margin: 1rem auto;
 font-size: 1.1rem;
 line-height: 1.6;
 max-width: 90%;
}

#page-indicatorr {
 position: relative;
 text-align: center;
 margin-top: 1rem;
 font-size: 0.9rem;
 opacity: 0.8;
}

.fade-element {
 opacity: 0;
 transform: translateY(20px);
 transition: opacity 0.6s ease, transform 0.6s ease;
}

.nav-btn.fade-show {
 transform: translateY(-50%);
}

.fade-show {
 opacity: 1;
 transform: translateY(0px);
}

.fade-out {
 opacity: 0 !important;
 transform: translateY(-30px) !important;
}

.nav-btn {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background: transparent;
 color: white;
 border: none;
 font-size: 2rem;
 cursor: pointer;
 padding: 1rem;
 transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
 z-index: 10;
}

.nav-btn:disabled {
 color: gray !important;
 cursor: not-allowed;
}

.nav-btn.left {
 left: 1rem;
}

.nav-btn.right {
 right: 1rem;
}

.lanjut-button {
 /* margin-top: 20px; */
 padding: 10px 20px;
 background: #0f0;
 border: none;
 color: #000;
 font-weight: bold;
 cursor: pointer;
 border-radius: 6px;
}

@media only screen and (max-width: 1212px) {
 #announcement-pages.end {
  margin: 10px 52px;
 }
}