@charset "UTF-8";
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
            font-family:'Poppins',sans-serif;
        }

        body{
            height:100vh;
            overflow:hidden;
            background:linear-gradient(135deg,#dbeafe,#eff6ff,#ffffff);
            display:flex;
            flex-direction:column;
        }

        a{
            text-decoration:none;
        }

        /* TOP BAR */
        .top-strip{
            height:12px;
            background:#0b2f75;
        }

        /* HEADER */
        .header{
            background:#ffffff;
            display:flex;
            justify-content:space-between;
            align-items:center;
            padding:10px 3%;
            border-bottom:1px solid #dbeafe;
        }

        .logo-section{
            display:flex;
            align-items:center;
            gap:12px;
        }

        .logo-section img{
            width:52px;
            height:52px;
        }

        .title-box h1{
            font-size:22px;
            color:#0b2f75;
            font-weight:800;
            line-height:1.2;
        }

        .title-box p{
            font-size:12px;
            color:#475569;
        }

        .header-tools{
            font-size:13px;
            color:#0b2f75;
            font-weight:600;
        }

        /* MAIN SCREEN */
        .main-container{
            flex:1;
            display:grid;
            grid-template-columns:1.25fr 0.75fr;
            align-items:center;
            padding:20px 3%;
            gap:25px;
        }

        /* HERO IMAGE */
        .hero-section{
            width:100%;
            height:100%;
            display:flex;
            align-items:center;
            justify-content:center;
        }

        .hero-section img{
            width:100%;
            max-height:78vh;
            object-fit:contain;
            border-radius:16px;
            box-shadow:0 12px 35px rgba(0,0,0,0.12);
        }

        /* LOGIN PANEL */
        .login-panel{
            background:rgba(255,255,255,0.95);
            border-radius:22px;
            padding:32px;
            box-shadow:0 15px 35px rgba(0,0,0,0.10);
            border:1px solid #dbeafe;
        }

        .login-panel h2{
            color:#0b2f75;
            font-size:30px;
            font-weight:800;
            margin-bottom:10px;
            line-height:1.3;
        }

        .login-panel p{
            font-size:15px;
            color:#526173;
            line-height:1.8;
            margin-bottom:24px;
        }

        .portal-btn{
            display:block;
            width:100%;
            text-align:center;
            padding:16px;
            margin-bottom:16px;
            border-radius:12px;
            font-size:17px;
            font-weight:700;
            transition:0.3s;
        }

        .portal-btn:hover{
            transform:translateY(-2px);
        }

        .user-btn{
            background:linear-gradient(135deg,#16a34a,#22c55e);
            color:#fff;
        }

        .officer-btn{
            background:linear-gradient(135deg,#0b2f75,#2563eb);
            color:#fff;
        }

        .small-links{
            margin-top:10px;
            text-align:center;
            font-size:13px;
            color:#64748b;
        }

        .small-links a{
            color:#16a34a;
            font-weight:700;
        }

        /* FOOTER */
        footer{
            background:#0b2f75;
            color:#fff;
            text-align:center;
            padding:10px;
            font-size:12px;
        }

        /* RESPONSIVE */
        @media(max-width:1100px){
            body{
                overflow:auto;
                height:auto;
            }

            .main-container{
                grid-template-columns:1fr;
                padding:20px;
            }

            .hero-section img{
                max-height:420px;
            }
            
            .hero-banner{

    width:100%;

    height:auto;

    display:block;

    border-radius:18px;

    object-fit:cover;
}

        }
        
        

        @media(max-width:768px){
            .title-box h1{
                font-size:18px;
            }

            .login-panel{
                padding:24px;
            }

            .login-panel h2{
                font-size:28px;
            }

            .portal-btn{
                font-size:15px;
                padding:14px;
            }
        }


/* popu up */

/* =========================
   POPUP MODAL CSS
========================= */

body.modal-open-custom{
    overflow:hidden;
}

/* BACKGROUND BLUR */

.blur-background{
    filter:blur(6px);
    pointer-events:none;
    user-select:none;
    transition:0.3s;
}

/* OVERLAY */

.custom-modal-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.45);
    z-index:99999;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:15px;
}

/* POPUP BOX */

.custom-popup{

    width:100%;
    max-width:900px;

    background:#ffffff;

    border-radius:22px;

    padding:22px;

    position:relative;

    animation:popupShow 0.3s ease;

    box-shadow:0 10px 35px rgba(0,0,0,0.25);

    max-height:88vh;

    overflow-y:auto;
}

/* ANIMATION */

@keyframes popupShow{

    from{
        transform:scale(0.85);
        opacity:0;
    }

    to{
        transform:scale(1);
        opacity:1;
    }

}

/* TITLE */

.popup-title{

    text-align:center;

    font-size:32px;

    font-weight:800;

    color:#0b2f75;

    margin-bottom:8px;
}

.popup-title i{
    margin-right:8px;
}

/* SUBTITLE */

.popup-subtitle{

    text-align:center;

    color:#64748b;

    font-size:15px;

    margin-bottom:22px;
}

/* CARD */

.do-card,
.dont-card{

    border-radius:18px;

    padding:20px;

    height:100%;
}

/* DO CARD */

.do-card{

    background:#f0fff4;

    border:2px solid #22c55e;
}

/* DONT CARD */

.dont-card{

    background:#fff5f5;

    border:2px solid #ef4444;
}

/* HEADINGS */

.do-title,
.dont-title{

    text-align:center;

    font-size:26px;

    font-weight:800;

    margin-bottom:18px;
}

.do-title{
    color:#16a34a;
}

.dont-title{
    color:#dc2626;
}

/* LIST */

.do-list,
.dont-list{

    list-style:none;

    padding:0;

    margin:0;
}

/* LIST ITEM */

.do-list li,
.dont-list li{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-bottom:14px;

    font-size:14px;

    line-height:1.5;
}

/* ICONS */

.do-list i{

    color:#16a34a;

    margin-top:4px;

    font-size:12px;
}

.dont-list i{

    color:#dc2626;

    margin-top:4px;

    font-size:12px;
}

/* CHECKBOX AREA */

.agree-box{

    margin-top:25px;

    text-align:center;

    font-size:17px;

    font-weight:600;

    color:#334155;
}

.agree-box input{

    width:25px;

    height:18px;

    margin-right:8px;

    cursor:pointer;
}

/* BUTTON */

.process-btn{

    background:linear-gradient(135deg,#0b2f75,#2563eb);

    color:#fff;

    border:none;

    padding:13px 38px;

    border-radius:12px;

    font-size:19px;

    font-weight:700;

    margin-top:22px;

    transition:0.3s;

    cursor:pointer;
}

/* BUTTON HOVER */

.process-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 6px 18px rgba(37,99,235,0.35);
}

/* DISABLED BUTTON */

.process-btn:disabled{

    background:#94a3b8;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;
}

/* SCROLLBAR */

.custom-popup::-webkit-scrollbar{
    width:7px;
}

.custom-popup::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:10px;
}

/* MOBILE */

@media(max-width:768px){

    .custom-popup{

        padding:16px;
        max-height:90vh;
    }

    .popup-title{

        font-size:24px;
    }

    .popup-subtitle{

        font-size:13px;
    }

    .do-title,
    .dont-title{

        font-size:21px;
    }

    .do-list li,
    .dont-list li{

        font-size:14px;
    }

    .process-btn{

        width:100%;
        font-size:16px;
    }

    /* TAX EVASION INFORMATION */

    .login-panel h2{

        font-size:20px;   /* 16px se bada */
        white-space:nowrap;
        text-align:center;
        margin-bottom:15px;
    }

    .platform-points{

        font-size:13px;
        line-height:1.7;
        padding-left:20px;
    }

}

/* PLATFORM POINTS */

.platform-points{

    margin-top:15px;
    padding-left:22px;
    color:#475569;
    font-size:14px;
    line-height:1.9;
}

.platform-points li{

    margin-bottom:8px;
}

.platform-points li{

    margin-bottom:8px;
}