body.login-bg {
  background: #0a1a3c;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Animasi kapal bergerak */
@keyframes ship-move {
  0% { left: -200px; }
  100% { left: 100vw; }
}

.port-ship {
  position: absolute;
  bottom: 80px;
  left: -200px;
  width: 240px;
  z-index: 2;
  opacity: 0.95;
  animation: ship-move 10s linear infinite;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.18));
}

/* Crane animasi */
@keyframes crane-arm {
  0%, 100% { transform: rotate(-10deg); }
  20% { transform: rotate(0deg); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(0deg); }
  80% { transform: rotate(-10deg); }
}

@keyframes container-lift {
  0%, 100% { bottom: 60px; }
  10% { bottom: 120px; }
  30% { bottom: 120px; }
  40% { bottom: 60px; }
}
.port-crane {
  position: absolute;
  bottom: 60px;
  right: 80px;
  width: 120px;
  z-index: 5;
}
.port-crane-arm {
  transform-origin: bottom left;
  animation: crane-arm 4s ease-in-out infinite;
}

/* Container animasi */
@keyframes container-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.port-container {
  position: absolute;
  left: 38vw;
  width: 90px;
  z-index: 6;
  opacity: 0.97;
  animation: container-lift 4s cubic-bezier(.68,-0.55,.27,1.55) infinite;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.12));
}

/* Ombak */
.port-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 120px;
  background: url('../img/4799410.jpg') repeat-x;
  background-size: auto 120px;
  z-index: 10;
  opacity: 0.98;
  animation: wave-move 8s linear infinite;
  filter: brightness(1.08);
}
@keyframes wave-move {
  0% { background-position-x: 0; }
  100% { background-position-x: 1000px; }
}

.login-bottom-logo {
  position: fixed;
  left: 24px;
  bottom: 18px;
  width: 90px;
  z-index: 50;
  opacity: 0.93;
}
@media (max-width: 600px) {
  .login-bottom-logo {
    width: 60px;
    left: 10px;
    bottom: 10px;
  }
}

.login-bottom-logo-right {
    left: auto !important;
    right: 24px;
    width: 90px;
    border-radius: 50px 50px 50px 50px/38px 38px 38px 38px;
    border: 3px solid #fff;
    background: #f8fafc;
    box-shadow: 0 2px 12px 0 #0a1a3c22;
    padding: 8px;
  }
  @media (max-width: 600px) {
    .login-bottom-logo-right {
      right: 10px;
      width: 60px;
      padding: 5px;
    }
  }

  .register-logo-inside {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.7rem;
    margin-bottom: 0.2rem;
  }
  .register-logo-inside img {
    width: 120px;
    height: auto;
  }
  .modern-label { font-weight: 600; color: #222; }
  .modern-input, .modern-select, .modern-textarea {
    border-radius: 0.7rem;
    font-size: 1.08rem;
    padding: 0.7rem 1rem;
    border: 1px solid #3b5998;
    background: #f8fafc;
    color: #222;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .modern-input:focus, .modern-select:focus, .modern-textarea:focus {
    border-color: #ffffffff;
    box-shadow: 0 0 0 2px #2563eb33;
  }
  .modern-col {
    background: #fefefeff;
    border-radius: 0.50rem;
    /* box-shadow: 0 1px 6px 0 #0e1a2b; */
    padding: 1.2rem 1.2rem 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .modern-col > div, .modern-col > input, .modern-col > textarea, .modern-col > select {
    margin-bottom: 1.1rem;
  }
  .row.g-4.align-items-start {
    align-items: stretch !important;
  }
  @media (max-width: 991px) {
    .modern-col { 
      margin-bottom: 1.5rem;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    .card.mb-3 {
      margin-left: auto !important;
      margin-right: auto !important;
      width: 100% !important;
      max-width: 98vw !important;
    }
  }

  .captcha-card {
    background: #f1f5fa;
    border-radius: 0.7rem;
    box-shadow: 0 2px 8px 0 #b6c6e0;
    padding: 1.1rem 1.2rem 1rem 1.2rem;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 1.1rem;
  }
  .captcha-icon {
    font-size: 2.1rem;
    color: #2563eb;
    background: #e3eaff;
    border-radius: 50%;
    width: 2.7rem;
    height: 2.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px 0 #b6c6e0;
  }
  .captcha-label {
    font-weight: 600;
    color: #183153;
    font-size: 1.08rem;
    margin-bottom: 0.3rem;
  }
  .captcha-input {
    max-width: 120px;
    border-radius: 0.5rem;
    border: 1px solid #2563eb;
    padding: 0.5rem 0.8rem;
    font-size: 1.08rem;
    color: #222;
    background: #fff;
    margin-left: 1rem;
  }