@keyframes slide-in {
  0% {
    top: -100%;
  }

  100% {
    top: 50%;
  }
}

.link-container {
  display: flex;
  justify-content: center;
  font-size: var(--x-large-font);
  padding: 0;
  width: 100%;
}

.link-container a {
  width: 50%;
  text-align: center;
  padding: 15px 20px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: bolder;
  text-decoration: none;
}

.main-feature {
  background: #dadada;
  background-blend-mode: overlay, normal, normal;
  padding: 10px;
  color: #0c0c0c;
}

/* Container Utama Tombol */
.register-button, .login-button {
    border: none;
    border-radius: 8px; /* Sudut sedikit melengkung agar modern */
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Bayangan bawah agar terlihat timbul */
}

/* Tombol DAFTAR (Gold/Orange Premium) */
.register-button {
    background: linear-gradient(to bottom, #ffcc00 0%, #ffaa00 50%, #cc8800 100%);
    border-bottom: 3px solid #996600; /* Efek tebal di bawah */
}

.register-button:hover {
    background: linear-gradient(to bottom, #ffdb4d 0%, #ffbb33 50%, #e69900 100%);
    box-shadow: 0 0 20px rgba(255, 170, 0, 0.6);
    transform: translateY(-2px); /* Melayang sedikit saat kursor di atasnya */
}

/* Tombol LIVECHAT/LOGIN (Red Neon) */
.login-button {
    background: linear-gradient(to bottom, #ff4d4d 0%, #ff0000 50%, #990000 100%);
    border-bottom: 3px solid #660000;
}

.login-button:hover {
    background: linear-gradient(to bottom, #ff6666 0%, #ff3333 50%, #cc0000 100%);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
    transform: translateY(-2px);
}

/* Tambahan Efek Kilatan Cahaya (Glow Sweep) */
.register-button::after, .login-button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(30deg);
    transition: all 0.5s;
    animation: sweep 4s infinite;
}

@keyframes sweep {
    0% { left: -60%; }
    20% { left: 120%; }
    100% { left: 120%; }
}

.word h1,
h2,
h3 {
  margin-top: 3%;
  margin-bottom: 2%;
  text-align: center;
  color: #cb101a;
}

.word p,
ul {
  color: #0d0d0d;
}

.word table,
th,
td {
  padding: 5px;
  color: #0d0d0d;
}