:root{
    --primary:#1877f2;
    --success:#1877f2;
    --bg:#eef1f5;
    --card:#ffffff;
    --text:#1c1e21;
    --muted:#6b7280;
}

*{box-sizing:border-box}

body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
}

.container{
    max-width:480px;
    min-height:100vh;
    margin:0 auto;
    padding:8px;
    display:flex;
    flex-direction:column;
}

.poster{
    width:100%;
    margin-bottom:16px;
}

.card{
    flex:1;
    background:var(--card);
    border-radius:18px;
    padding:20px;
    box-shadow:0 8px 22px rgba(0,0,0,.12);
}

h2{
    text-align:center;
    font-size:24px;
    margin:6px 0;
    color:#0b4c8a;
}

/* ===== TEKS TELEGRAM ===== */
.telegram-text{
    overflow:hidden;
    white-space:nowrap;
    margin:12px 0 22px;
}
.telegram-track{
    display:inline-block;
    padding-left:100%;
    animation:telegramMove 12s linear infinite;
    font-size:16px;
    font-weight:700;
    color:var(--primary);
}
@keyframes telegramMove{
    0%{transform:translateX(0)}
    100%{transform:translateX(-100%)}
}

/* ===== FORM ===== */
.form-group{margin-top:18px}
.input-box{position:relative}

input{
    width:100%;
    height:58px;
    border-radius:14px;
    border:1px solid #cfd5dd;
    background:#fafafa;
    padding:0 18px;
    font-size:16px;
    transition: all 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

input:focus{
    outline:none;
    background:#fff;
    border-color:var(--primary);
    box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.1);
}

/* FLAG MALAYSIA */
.flag-my{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    width:32px;
    height:20px;
}

.country-code{
    position:absolute;
    left:52px;
    top:50%;
    transform:translateY(-50%);
    font-size:16px;
    font-weight:600;
    color:var(--text);
    z-index:1;
    pointer-events:none;
}

.with-flag{padding-left:90px}

#wrong{
    margin-top:16px;
    padding:12px 16px;
    border-radius:10px;
    background:#ffe6e6;
    border:1px solid #ff4444;
    color:#d32f2f;
    font-family:'Poppins', sans-serif;
    font-size:14px;
    font-weight:500;
    text-align:center;
}

button{
    width:100%;
    height:58px;
    margin-top:26px;
    border:none;
    border-radius:14px;
    background:#1877f2;
    color:#fff;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
button:disabled{background:#ccc; cursor:not-allowed;}
button:active{transform:scale(.98)}
button:hover:not(:disabled){background:#1565c0}

.step{display:none}
.step.active{display:block}

.logo-strip{
    margin-top:26px;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.logo-strip img{
    height:200px;
    max-width:100%;
    object-fit:contain;
}

.footer{
    margin-top:16px;
    font-size:12px;
    color:var(--muted);
    text-align:center;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .container {
        padding: 12px;
        max-width: 100%;
    }
    
    .card {
        padding: 16px;
        border-radius: 12px;
    }
    
    h2 {
        font-size: 20px;
    }
    
    .telegram-track {
        font-size: 14px;
    }
    
    input {
        height: 50px;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    button {
        height: 50px;
        font-size: 16px;
        margin-top: 20px;
    }
    
    .flag-my {
        width: 28px;
        height: 18px;
        left: 12px;
    }
    
    .country-code {
        left: 46px;
        font-size: 14px;
    }
    
    .with-flag {
        padding-left: 80px;
    }

    .logo-strip img {
        height: 150px;
    }
}
@media (min-width: 481px) and (max-width: 768px) {
    .container {
        max-width: 500px;
        padding: 16px;
    }
    
    .card {
        padding: 24px;
    }
    
    h2 {
        font-size: 22px;
    }
    
    .telegram-track {
        font-size: 15px;
    }
    
    input {
        height: 54px;
    }
    
    button {
        height: 54px;
        font-size: 16px;
    }
    
    .logo-strip img {
        height: 180px;
    }
}

/* Desktop (769px+) */
@media (min-width: 769px) {
    .container {
        max-width: 480px;
        padding: 20px;
    }
    
    .card {
        padding: 28px;
        box-shadow: 0 12px 32px rgba(0,0,0,.15);
    }
    
    h2 {
        font-size: 26px;
    }
    
    .telegram-track {
        font-size: 17px;
    }
    
    input {
        height: 60px;
        font-size: 17px;
    }
    
    button {
        height: 60px;
        font-size: 18px;
        margin-top: 28px;
    }
    
    .flag-my {
        width: 36px;
        height: 22px;
        left: 16px;
    }
    
    .country-code {
        left: 58px;
        font-size: 17px;
    }
    
    .with-flag {
        padding-left: 100px;
    }
    
    .logo-strip img {
        height: 220px;
    }
    
    .footer {
        font-size: 13px;
    }
}

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
    .container {
        max-width: 500px;
    }
    
    .logo-strip img {
        height: 250px;
    }
}