:root{--p:#6d5dfc;--p2:#8b5cf6;--text:#251f38;--muted:#756f83;--line:#e9e5f3}*{box-sizing:border-box}body{margin:0;font-family:Inter,"Segoe UI",system-ui,sans-serif;color:var(--text);background:radial-gradient(circle at top left,#e9e3ff 0,transparent 34rem),linear-gradient(150deg,#f7f5ff,#f4f8ff);min-height:100vh}.survey-shell{width:min(760px,calc(100% - 28px));margin:34px auto}.survey-card{background:rgba(255,255,255,.88);backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.95);border-radius:30px;box-shadow:0 28px 80px rgba(67,52,112,.13);overflow:hidden}.survey-hero{padding:32px 32px 24px;text-align:center;background:linear-gradient(135deg,rgba(109,93,252,.10),rgba(139,92,246,.04))}.survey-logo{width:74px;height:74px;object-fit:contain;margin-bottom:12px}.survey-hero h1{font-size:clamp(25px,4vw,34px);margin:0 0 8px;letter-spacing:-.04em}.survey-hero p{margin:0;color:var(--muted);line-height:1.6}.privacy{margin:22px 28px 0;padding:16px 18px;border-radius:18px;background:#f3f0ff;display:flex;gap:13px;align-items:flex-start;color:#51476d}.privacy i{font-size:21px;color:var(--p)}.survey-form{padding:28px}.question{padding:22px 0;border-bottom:1px solid var(--line)}.question:first-child{padding-top:0}.question h2{font-size:17px;margin:0 0 6px}.question p{font-size:13px;color:var(--muted);margin:0 0 14px}.rating-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.rating-option input{position:absolute;opacity:0;pointer-events:none}.rating-option label{cursor:pointer;min-height:66px;border:1px solid var(--line);background:#fff;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-weight:800;transition:.18s}.rating-option small{font-size:10px;color:var(--muted);font-weight:600;text-align:center}.rating-option input:checked+label{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--p),var(--p2));box-shadow:0 10px 24px rgba(109,93,252,.24);transform:translateY(-2px)}.rating-option input:checked+label small{color:rgba(255,255,255,.85)}textarea{width:100%;border:1px solid var(--line);border-radius:17px;padding:14px 15px;font:inherit;resize:vertical;outline:none;background:#fff}textarea:focus{border-color:#9c91ff;box-shadow:0 0 0 4px rgba(109,93,252,.09)}.submit-btn{width:100%;border:0;border-radius:16px;padding:15px 18px;margin-top:22px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 12px 28px rgba(109,93,252,.22)}.survey-foot{text-align:center;color:#918b9c;font-size:12px;padding:0 20px 25px}@media(max-width:600px){.survey-shell{margin:10px auto;width:min(100% - 18px,760px)}.survey-card{border-radius:23px}.survey-hero{padding:25px 18px 20px}.privacy{margin:16px 16px 0}.survey-form{padding:20px 16px}.rating-grid{gap:5px}.rating-option label{min-height:58px;border-radius:13px;font-size:14px}.rating-option small{display:none}.question{padding:19px 0}}

/* Mooney UI v16 — login polish */
body{display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 15% 10%,rgba(124,92,255,.18),transparent 30rem),radial-gradient(circle at 90% 85%,rgba(92,151,255,.13),transparent 28rem),#f6f5fb}.login-wrapper{width:min(100%,470px);padding:0}.login-box{position:relative;overflow:hidden;padding:34px;border:1px solid rgba(255,255,255,.9);border-radius:30px;background:rgba(255,255,255,.86);backdrop-filter:blur(22px);box-shadow:0 28px 75px rgba(54,39,91,.13)}.login-box:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-80px;top:-90px;background:rgba(116,91,255,.1);pointer-events:none}.login-box .logo{width:76px;height:76px;object-fit:contain}.login-box h3{font-weight:850;letter-spacing:-.035em}.login-box .form-control,.login-box .input-group .btn{min-height:48px;border-radius:14px}.login-box .input-group .form-control{border-radius:14px 0 0 14px}.login-box .input-group .btn{border-radius:0 14px 14px 0}.login-box .btn-primary{min-height:49px;border:0;border-radius:15px;font-weight:800;background:linear-gradient(135deg,#6957f5,#8b5cf6);box-shadow:0 12px 28px rgba(105,87,245,.22)}.login-box .alert{border:0;border-radius:15px}.login-box .form-label{font-size:.78rem;font-weight:800;color:#625a70}@media(max-width:575px){body{padding:0;background:#fff}.login-wrapper{width:100%;min-height:100vh;display:flex;align-items:center}.login-box{width:100%;padding:30px 22px;border:0;border-radius:0;box-shadow:none;background:#fff}.login-box .logo{width:70px;height:70px}}


/* ==========================================================
   LOGIN MOBILE — SM MODERN UI GLOSSY
   Bingkai tetap terlihat di layar kecil.
========================================================== */
@media (max-width:575.98px){

    html,
    body{
        min-height:100%;
    }

    body{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        min-height:100dvh !important;
        padding:
            max(18px, env(safe-area-inset-top))
            14px
            max(18px, env(safe-area-inset-bottom)) !important;

        background:
            radial-gradient(circle at 12% 8%,rgba(124,92,255,.18),transparent 17rem),
            radial-gradient(circle at 94% 88%,rgba(162,132,255,.13),transparent 18rem),
            linear-gradient(155deg,#f8f7fc 0%,#f3f1fa 52%,#f8f8fc 100%) !important;
    }

    .login-wrapper{
        width:100% !important;
        max-width:420px !important;
        min-height:0 !important;
        padding:0 !important;
        margin:auto !important;
        display:block !important;
    }

    .login-box{
        width:100% !important;
        padding:27px 20px 21px !important;

        border:1px solid rgba(255,255,255,.96) !important;
        border-radius:24px !important;

        background:
            radial-gradient(circle at 100% 0,rgba(151,119,255,.10),transparent 32%),
            linear-gradient(145deg,rgba(255,255,255,.97),rgba(251,250,254,.93)) !important;

        -webkit-backdrop-filter:blur(20px) saturate(120%) !important;
        backdrop-filter:blur(20px) saturate(120%) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 2px rgba(52,39,79,.03),
            0 16px 42px rgba(62,44,105,.12) !important;

        overflow:hidden !important;
    }

    .login-box::before{
        width:150px !important;
        height:150px !important;
        right:-70px !important;
        top:-78px !important;
        background:rgba(116,91,255,.095) !important;
    }

    .login-box .text-center.mb-4{
        margin-bottom:20px !important;
    }

    .login-box .logo{
        width:66px !important;
        height:66px !important;
        padding:5px;
        border-radius:18px;
        background:rgba(255,255,255,.72);
        box-shadow:
            inset 0 1px 0 #fff,
            0 8px 22px rgba(80,61,126,.08);
    }

    .login-box h3{
        margin-top:13px !important;
        margin-bottom:5px !important;
        font-size:1.22rem !important;
        line-height:1.25;
    }

    .login-box .text-muted{
        font-size:.82rem;
    }

    .login-box .form-label{
        margin-bottom:7px;
        font-size:.82rem !important;
    }

    .login-box .mb-3{
        margin-bottom:15px !important;
    }

    .login-box .mb-4{
        margin-bottom:18px !important;
    }

    .login-box .form-control,
    .login-box .input-group .btn{
        min-height:48px !important;
    }

    .login-box .form-control{
        font-size:16px !important; /* mencegah auto zoom iPhone */
        padding:10px 13px;
        border-color:#e5e0eb;
        background:rgba(255,255,255,.92);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
    }

    .login-box .form-control:focus{
        border-color:rgba(112,92,255,.48);
        box-shadow:0 0 0 3px rgba(112,92,255,.08);
    }

    .login-box .input-group .btn{
        width:50px;
        background:#fff;
        border-color:#e5e0eb;
        color:#71697b;
    }

    .login-box .btn-primary{
        min-height:49px !important;
        font-size:.9rem;
        border-radius:14px !important;
    }

    .login-box .alert{
        padding:11px 13px;
        margin-bottom:17px;
        font-size:.78rem;
        line-height:1.45;
    }

    .login-box hr{
        margin:21px 0 16px;
        border-color:#ece8f1;
        opacity:1;
    }

    .login-box > .text-center.text-muted{
        font-size:.7rem;
        line-height:1.55;
    }
}

/* HP pendek: card tetap memiliki ruang atas/bawah dan bisa discroll */
@media (max-width:575.98px) and (max-height:650px){
    body{
        align-items:flex-start !important;
        overflow-y:auto;
    }

    .login-wrapper{
        margin:auto !important;
    }

    .login-box{
        padding-top:21px !important;
        padding-bottom:18px !important;
    }

    .login-box .logo{
        width:56px !important;
        height:56px !important;
    }

    .login-box .text-center.mb-4{
        margin-bottom:15px !important;
    }

    .login-box h3{
        font-size:1.08rem !important;
    }
}

/* Layar sangat sempit */
@media (max-width:360px){
    body{
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .login-box{
        padding-left:16px !important;
        padding-right:16px !important;
        border-radius:21px !important;
    }
}