:root {

	--biru-ff: hsl(215, 63%, 41%);
	--kuning-ff: hsl(48, 99%, 52%);
	--hijau-ff: hsl(144, 53%, 39%);
	--body-white: hsl(150, 100%, 98%);
	--elixir-bg-150: hsl(0, 0%, 96%);

	--biru-ff-dark: hsl(215, 63%, 30%);
	--kuning-ff-dark: hsl(48, 99%, 40%);
	--hijau-ff-dark: hsl(144, 53%, 28%);
	--body-white-dark: hsl(150, 40%, 92%);
	--elixir-bg-150-dark: hsl(0, 0%, 88%);

	--top-blue-strip-height: 105px;
}



/* Infinite Scrolling */
@keyframes scroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

.ranks-animate-scroll {
	display: flex;
	width: max-content;
	animation: scroll 20s linear infinite;
}

/* Pause on hover for better UX */
.ranks-animate-scroll:hover {
	animation-play-state: paused;
}

.btn {
	border-radius:.2em;
	padding:.5em;
	border-color:1px solid;
}

.btn-primary{
	background-color: var(--biru-ff);
	border-color: var(--biru-ff-dark);
	color:var(--elixir-bg-150);
}


.figma-shadow { 
	box-shadow: 1px 2px 4px 0px rgba(0, 21, 7, 0.12);
}


.wrapper-all > .section-margined{
	margin-top:50px;
}



.news-right p{
	margin-bottom:1.2em;
}

section ol, 
main ol {
	list-style: decimal;
	padding-left: 20px;
}

section ul,
main ul {
	list-style: circle;
	padding-left: 20px;
}
.cats,
.tags {
	list-style-type: none;

}

@layer components {
  .allow-lists ul {
    @apply list-disc ml-6;
    padding-left: 1rem;
    list-style-type: disc !important;
  }

  .allow-lists ol {
    @apply list-decimal ml-6;
    padding-left: 1rem;
    list-style-type: decimal !important;
  }

  .allow-lists li {
    @apply mb-1;
  }
  
  /* Simulating Bootstrap 5 .table-dark */
  .table-dark {
    @apply w-full text-white border-gray-700 bg-[#212529];
  }

  .table-dark th,
  .table-dark td {
    @apply border-b border-gray-700 p-3;
  }

  .table-dark thead th {
    @apply border-b-2 border-gray-700 bg-[#212529] font-bold;
  }

  /* Custom Color: Biru FF */
  .table-biru-ff {
    background-color: var(--biru-ff);
    @apply w-full text-white border-white/10;
  }

  .table-biru-ff th,
  .table-biru-ff td {
    @apply border-b border-white/10 p-3;
  }

  .table-biru-ff thead th {
    background-color: var(--biru-ff);
    @apply border-b-2 border-white/20 font-bold;
  }

  /* Optional: Hover states for both */
  .table-hover-dark tbody tr:hover {
    @apply bg-white/5;
  }
}