.cta-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    font-family: 'Arial', sans-serif;
}

.cta-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.cta-banner img {
  width: 100%;
  object-fit: cover;
}

.banner-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: linear-gradient(135deg, gold, orange);
    color: #000;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 20px;
    font-weight: bold;
}

.cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
}

.cta-box {
    position: relative;
    width: 90%;           
    max-width: 420px;     
    margin: 8% auto;      
    background: radial-gradient(circle at top, #0d2a4d, #050b16);
    border-radius: 18px;
    padding: 24px;
    text-align: center;
    color: #fff;
    animation: popIn 0.5s ease;
    overflow: hidden;
    box-sizing: border-box;
}

.cta-glow {
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    background: linear-gradient(120deg, gold, cyan, gold);
    filter: blur(20px);
    opacity: 0.25;
    z-index: -1;
}

.cta-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

.cta-title {
    font-size: 20px;
    font-weight: bold;
}

.cta-title span {
    display: block;
    margin-top: 6px;
    color: gold;
}

.cta-subtitle {
    font-size: 14px;
    opacity: 0.9;
    margin: 12px 0;
}

.cta-numbers {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 16px 0;
}

.cta-numbers .num {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(145deg, gold, orange);
    color: #000;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: float 2s infinite ease-in-out;
}

.cta-actions {
    margin-top: 20px;
}

.btn-register {
    display: block;
    padding: 14px;
    background: linear-gradient(135deg, gold, orange);
    color: #000;
    font-weight: bold;
    border-radius: 10px;
    text-decoration: none;
    margin-bottom: 10px;
    animation: pulse 1.5s infinite;
}

.btn-login {
    display: block;
    padding: 10px;
    border: 1px solid #00eaff;
    color: #00eaff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
}

.cta-note {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 12px;
}

.cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #081f3a, #020b18);
  border: 1px solid rgba(255,215,0,.4);
  box-shadow: 0 0 18px rgba(255,215,0,.15);
}

.strip-left {
  text-align: left;
}

.strip-label {
  font-size: 11px;
  color: gold;
  font-weight: bold;
  letter-spacing: 1px;
}

.strip-market {
  font-size: 12px;
  opacity: .8;
  margin-top: 2px;
}

.strip-right {
  text-align: right;
}

.strip-number {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.num-ball {
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, gold, orange);
  color: #000;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: float 2s infinite ease-in-out;
}

/* efek beda timing biar hidup 
.num-ball:nth-child(2) { animation-delay: .2s; }
.num-ball:nth-child(3) { animation-delay: .4s; }
.num-ball:nth-child(4) { animation-delay: .6s; }
*/

.strip-claim {
  font-size: 11px;
  color: gold;
  margin-top: 2px;
}

    @keyframes popIn {
        from { transform: scale(0.8); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }

    @keyframes float {
        0%,100% { transform: translateY(0); }
        50% { transform: translateY(-6px); }
    }

    @keyframes pulse {
        0% { box-shadow: 0 0 0 rgba(255,215,0,0.6); }
        50% { box-shadow: 0 0 18px rgba(255,215,0,1); }
        100% { box-shadow: 0 0 0 rgba(255,215,0,0.6); }
    }

    /* full hp */
        @media (max-width: 360px) {
        .cta-box {
            width: 95%;
            margin: 4% auto;
            border-radius: 12px;
            padding: 16px;
        }
    }