/*-----------------------------------------------------*/
/* Ticker - running text atas*/
.top-ticker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #ff9800;
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 9999;
}

.ticker-label {
  padding: 6px 15px 6px 50px;
  background: rgba(255, 7, 7, 0.303); /* opsional, biar label beda warna */
  font-weight: bold;
  white-space: nowrap;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
  flex-shrink: 0; /* supaya label nggak ketarik animasi */
  transform-origin: left; /* membesar dari kiri ke kanan */
  animation: pulseX 1.2s ease-in-out infinite; /* efek kembang kempis */
}

.ticker-content {
  overflow: hidden;
  flex: 1; /* isi sisa lebar */
  color: rgb(59, 54, 54);
}

.ticker-content span {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  font-size: medium;
  animation: tickerMove 20s linear infinite;
}

@keyframes blink {
  50% {
    opacity: 0; /* setengah waktu transparan */
  }
}

@keyframes pulseX {
  0%, 100% {
    transform: scaleX(1);   /* ukuran normal */
  }
  50% {
    transform: scaleX(1.01); /* membesar sedikit */
  }
}

@keyframes tickerMove {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@media (max-width: 768px) {
  .top-ticker {
    font-size: 14px;
	flex-direction: column; /* label di atas, content di bawah */
    align-items: flex-start; /* biar teks mulai dari kiri */
	box-shadow: 3px 7px 13px 9px rgba(0, 0, 0, 0.1); /* bayangan */
	
  }
  .ticker-label {
    width: 100%; 
    padding: 5px 8px;
	font-size: 14px;
	text-transform: uppercase;
	text-align: center;
	align-items: center;
	animation: blink 1.2s ease-in-out infinite; /* efek berkedip */
	border-radius: 0; /* buang sudut melengkung */
	background: #833AB4;
	background: linear-gradient(319deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 22%, rgba(252, 176, 69, 1) 100%);
  }
  .ticker-content {
   width: 100%;
   padding: 5px 8px;
  }
}