:root{--pink:#e83e8c;--soft:#ffe7f1;--line:#dedede;--muted:#999;--green:#99ffa9}*{box-sizing:border-box}body{margin:0;color:#161616;background:#fff;font:12px Arial,Helvetica,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--pink);outline-offset:2px}.layout{display:flex;min-height:100vh}.sidebar{width:154px;flex-shrink:0;border-right:1px solid #cfcfcf;display:flex;flex-direction:column;padding:16px 8px 12px;background:#fff}.brand{display:flex;align-items:center;gap:5px;background:var(--soft);color:var(--pink);border-radius:7px;height:49px;padding:4px;margin-bottom:28px;font-size:10px;white-space:nowrap}.brand-logo{display:grid;place-items:center;width:43px;height:43px;flex-shrink:0;border-radius:50%;background:#f12b88;color:#151515;font:38px Georgia;overflow:hidden}.brand-logo img{width:100%;height:100%;object-fit:contain}.nav{display:flex;flex-direction:column;gap:4px}.nav-link{display:flex;align-items:center;gap:11px;min-height:40px;padding:0 7px;border-radius:6px;font-weight:700;font-size:9px}.nav-link:hover,.nav-link.active{background:var(--soft);color:var(--pink)}.nav-ico{font-size:23px;line-height:1;width:23px;text-align:center;font-weight:400}.side-end{margin-top:auto}.hearts{color:#fa60a3;text-align:center;margin:0 0 16px}.incoming{display:flex;align-items:center;gap:5px;position:relative;cursor:pointer}.incoming input{position:absolute;width:38px;height:22px;opacity:0;z-index:2;cursor:pointer}.pill-switch{position:relative;width:38px;height:22px;background:#bbb;border-radius:15px;flex-shrink:0}.pill-switch:after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:white;top:3px;left:3px;transition:transform .2s}.incoming input:checked+.pill-switch{background:var(--pink)}.incoming input:checked+.pill-switch:after{transform:translateX(16px)}.incoming small{font-size:7px;font-weight:bold}.logout{display:block;text-align:center;margin-top:42px;padding:8px;font-size:9px}.main{flex:1;min-width:0}.topbar{height:71px;padding:0 23px 0 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);font-size:13px}.top-right{display:flex;align-items:center;gap:7px}.icon-btn{border:0;background:none;font-size:26px;margin-right:13px}.admin-dot{width:35px;height:35px;border-radius:50%;background:#e54891;color:#fff;display:grid;place-items:center;font:25px Georgia}.admin-text{font-size:10px}.admin-text small{display:block;color:#999;font-size:8px}.content{padding:18px 15px 30px 20px;max-width:1500px;margin:auto}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0 10px}.toolbar-end,.button-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.toolbar-end label{display:flex;gap:6px;align-items:center}.search{border:1px solid #ccc;border-radius:10px;display:flex;align-items:center;gap:5px;padding:0 10px;height:38px;width:235px;max-width:100%;color:#777;font-size:20px}.search input{border:0;outline:0;width:100%;min-width:0;font-size:11px}.toolbar select,select,input[type=date]{padding:9px;border:1px solid #ddd;background:#fff;border-radius:5px}.btn{border:0;border-radius:5px;padding:10px 14px;text-align:center;display:inline-block;font-size:10px;white-space:nowrap}.btn.pink{background:var(--pink);color:#fff}.btn.green{background:#9fffa9;color:#086a2a;font-weight:bold}.btn.salmon{background:#ffc5c8;color:#e3222c;font-weight:bold}.btn.outline{background:#fff;border:1px solid #aaa;color:#222}.btn:hover{filter:brightness(.97)}.btn.small{padding:6px 9px}.btn.block{width:100%;margin-top:10px}.panel{border:1px solid #d6d6d6;border-radius:10px;background:#fff;overflow:hidden}.pad{padding:15px}.table-scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;text-align:left;min-width:620px}thead{background:#f5f5f5}th{font-size:10px;padding:13px 11px}td{padding:12px 11px;border-top:1px solid #e9e9e9;font-size:10px}tr:hover td{background:#fffafd}.product-cell,.person-cell{display:flex;gap:10px;align-items:center}.thumb{height:54px;width:54px;object-fit:cover;border-radius:9px;background:var(--soft)}.thumb-placeholder{display:grid;place-items:center;font-size:24px;color:var(--pink)}.subtext{display:block;font-size:8px;color:#999;margin-top:4px}.strong{font-weight:bold}.pink-text{color:var(--pink);font-weight:bold}.tag{display:inline-block;padding:5px 9px;border-radius:14px;font-size:9px;font-weight:bold;white-space:nowrap}.tag.ACTIVE,.tag.Ready,.tag.COMPLETED{background:#a8ffb2;color:#00a43c}.tag.INACTIVE,.tag.CANCELED,.tag.Pending{background:#ffc5c8;color:#ee2121}.tag.BOUQUET,.tag.PREPARING{background:#fffcb3;color:#c69c00}.tag.BALLOON,.tag.DELIVERED,.tag.PICKED-UP{background:#a4ddff;color:#146cdb}.tag.NEW-ORDER{background:#ffc3c5;color:#e12c31}.tag.DELIVERING{background:#ffacd0;color:#db247a}.tag.FLOWERS,.tag.CAKE{background:#f6d4ff;color:#9836bb}.tag.PARTY-SUPPLIES{background:#ffe5be;color:#ba6b00}.table-actions{display:flex;gap:7px;align-items:center}.mini-btn{font-size:10px;border:1px solid #bbb;border-radius:3px;padding:5px 7px;background:white;white-space:nowrap}.mini-btn.delete{background:#f92323;color:white;border:0}.detail-link{color:#ff4da1;font-size:21px}.pager{display:flex;justify-content:center;gap:5px;margin:14px}.pager button{background:#fff;border:1px solid #ccc;border-radius:4px;min-width:27px;padding:5px}.pager button.selected{background:var(--pink);color:white;border-color:var(--pink)}.pager button:disabled{opacity:.4}.section-title{font-size:13px;font-weight:600;margin:4px 0 31px}.product-form{display:flex;align-items:flex-start;gap:14px;max-width:680px;margin:0 15px}.form-image-col{width:120px;flex-shrink:0}.image-upload{height:125px;width:120px;border:1px solid #ffb9d3;background:#ffe8f1;border-radius:10px;display:grid;place-items:center;color:var(--pink);cursor:pointer;overflow:hidden}.image-upload img{width:100%;height:100%;object-fit:cover}.image-upload span{text-align:center;font-size:28px}.image-upload small{display:block;font-size:9px}.form-fields{flex:1;min-width:0}.wide-input,.form-fields textarea,.form-row select,.money-input{border:1px solid #dedede;border-radius:4px;padding:12px;background:white;width:100%}.wide-input{margin-bottom:12px}.form-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}.money-input{display:flex;align-items:center;gap:6px;font-weight:bold}.money-input input{width:100%;min-width:0;border:0;outline:0}.form-fields textarea{resize:vertical;min-height:130px}.form-actions{display:flex;justify-content:space-between;gap:12px;margin-top:12px}.form-actions .btn{width:34%;min-width:110px}.order-detail{display:grid;grid-template-columns:140px minmax(0,480px);gap:16px;justify-content:center;margin:22px auto}.order-image{width:140px;height:140px;object-fit:cover;border-radius:10px;background:var(--soft)}.order-image-placeholder{display:grid;place-items:center;color:var(--pink);font-size:33px}.order-left p{border:1px solid #ffc7dc;padding:10px;text-align:center;font-weight:bold;font-size:10px;border-radius:4px;margin:7px 0}.order-left .red{border-color:#ff3d3d;color:#f33;background:#fff1f1}.detail-field{display:flex;align-items:center;gap:10px;border:1px solid #ffc3dc;border-radius:5px;min-height:39px;margin-bottom:10px;overflow:hidden}.detail-field .field-icon{background:#ffe8f2;color:var(--pink);width:42px;align-self:stretch;display:grid;place-items:center;font-size:20px}.detail-field span:last-child{padding:7px;overflow-wrap:anywhere}.detail-field button{margin-left:auto;border:0;background:none;color:var(--pink);padding:9px}.detail-address{height:110px;border:1px solid #ffc3dc;border-radius:4px;padding:10px;white-space:pre-wrap}.detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.detail-actions select{max-width:165px;background:#fff9a7;border:1px solid #d6d17c}.detail-actions button{flex:1;min-width:95px}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:8px 0 16px}.metric{border:1px solid #ddd;border-radius:8px;min-height:89px;padding:17px 12px;display:flex;align-items:center;gap:12px;background:white}.metric.link:hover{background:#fff3f8;cursor:pointer}.metric-icon{width:42px;height:42px;display:grid;place-items:center;background:var(--soft);color:var(--pink);border-radius:50%;font-size:23px;flex-shrink:0}.metric small{display:block;color:#888;font-size:9px}.metric b{display:block;font-size:21px;margin-top:4px}.filters{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap;padding:14px;margin-bottom:13px}.filters label{display:flex;flex-direction:column;gap:6px;color:#666;font-size:9px}.filters input,.filters select{height:35px;min-width:105px;max-width:180px}.customer-layout{display:grid;grid-template-columns:minmax(0,1fr) 215px;gap:12px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px;border-bottom:1px solid #ddd;font-weight:bold;font-size:11px}.panel-heading a{color:var(--pink)}.customer-side{display:flex;flex-direction:column;gap:12px}.customer-side .panel{min-height:155px}.muted{color:#888}.detail-list{line-height:2;overflow-wrap:anywhere}.action-stack{display:flex;flex-direction:column;gap:9px;margin-top:15px}.report-charts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.report-charts h3{font-size:12px;margin:0 0 12px}.chart{min-height:180px;display:flex;gap:8px;align-items:flex-end;border-bottom:1px solid #ddd;padding:15px 8px 20px}.barcol{flex:1;text-align:center;min-width:0}.bar{background:linear-gradient(#f98abb,#e83e8c);border-radius:5px 5px 0 0;margin:0 auto 5px;max-width:47px;min-height:4px}.barcol small{color:#888;font-size:8px;white-space:nowrap}.category-chart{display:flex;flex-direction:column;gap:12px;justify-content:center;min-height:180px}.category-line{display:flex;align-items:center;gap:8px}.category-line>span{width:105px;font-size:10px}.category-track{height:15px;flex:1;background:#ffe8f1;border-radius:8px;overflow:hidden}.category-track i{display:block;height:100%;background:#ec4b94}.category-line b{width:30px;text-align:right}@media(max-width:1050px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-layout{grid-template-columns:1fr}.customer-side{display:grid;grid-template-columns:1fr 1fr}}@media(max-width:650px){.layout{display:block}.sidebar{width:100%;min-height:auto;border-right:0;border-bottom:1px solid #ddd;padding:9px}.brand{width:max-content;margin-bottom:10px}.nav{flex-direction:row;overflow-x:auto}.nav-link{min-width:max-content;padding:0 9px}.side-end{display:flex;align-items:center;justify-content:space-between;margin-top:8px}.hearts{display:none}.logout{margin:0}.topbar{height:59px;padding:0 14px}.content{padding:14px}.toolbar{flex-wrap:wrap}.toolbar-end{justify-content:space-between;width:100%}.search{width:100%}.metric-grid{gap:8px}.metric{padding:10px;min-height:77px}.metric-icon{width:33px;height:33px;font-size:18px}.metric b{font-size:18px}.product-form{margin:0;gap:10px}.form-image-col{width:95px}.image-upload{width:95px;height:100px}.form-row{grid-template-columns:1fr;gap:7px}.form-actions .btn{min-width:0;width:50%}.order-detail{grid-template-columns:1fr;margin:0}.order-left{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap}.order-image{width:95px;height:100px}.order-left p{flex:1;min-width:90px}.report-charts,.customer-side{grid-template-columns:1fr}.filters label{flex:1;min-width:115px}.filters input,.filters select{max-width:none;width:100%}}@media print{.sidebar,.topbar,.filters,.button-row,.pager{display:none!important}.content{padding:0}.main{width:100%}.panel{break-inside:avoid}body{font-size:10px}}
.toast{position:fixed;bottom:20px;right:20px;background:#272027;color:white;padding:11px 16px;border-radius:8px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s;z-index:10}.toast.show{opacity:1;transform:translateY(0)}.chips{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.chip{padding:8px 12px;border-radius:30px;background:#fff0f7;color:#cc2873;font-weight:bold}.chip.selected{background:#e83e8c;color:white}.welcome{display:flex;align-items:center;gap:12px;margin:10px 0 20px}.welcome-icon{display:grid;place-items:center;width:64px;height:64px;background:#ffd0e4;color:#e83e8c;border-radius:15px;font-size:32px}.welcome small{color:#999}.welcome h2{font-size:22px;font-weight:normal;margin:4px 0}.import-button{cursor:pointer}@media print{.toast{display:none}}

/* =================================
   AKAK BELON - LOGIN PAGE
   ================================= */

:root {
    --pink: #ff4da6;
    --pink-dark: #eb328c;
    --pink-light: #ffe3ed;
    --text: #343039;
    --muted: #a7a0a5;
    --white: #fffafb;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);

    background:
        radial-gradient(
            circle at 98% 2%,
            #f9a9cc 0,
            #f9a9cc 52px,
            transparent 53px
        ),
        radial-gradient(
            circle at 1% 76%,
            #ffb8d8 0,
            #ffb8d8 72px,
            transparent 73px
        ),
        radial-gradient(
            ellipse at 12% 112%,
            #f7a5cb 0,
            #f7a5cb 180px,
            transparent 181px
        ),
        linear-gradient(
            135deg,
            #ffe9f0 0%,
            #fbd5e4 100%
        );

    background-attachment: fixed;
    overflow-x: hidden;
}

/* BULATAN HIASAN */

body::before {
    content: "";
    position: fixed;
    top: -65px;
    right: -60px;
    width: 145px;
    height: 145px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    pointer-events: none;
}

body::after {
    content: "";
    position: fixed;
    left: -55px;
    bottom: -95px;
    width: 300px;
    height: 190px;
    border-radius: 50%;
    background: rgba(255, 143, 196, 0.30);
    pointer-events: none;
}

/* LAYOUT UTAMA */

.login-container {
    position: relative;
    z-index: 1;

    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 28px 20px;
}

/* KAD LOGIN */

.login-card {
    width: 100%;
    max-width: 276px;

    background: var(--white);
    border-radius: 16px;

    padding: 13px 31px 11px;

    box-shadow:
        0 4px 18px rgba(105, 56, 78, 0.20),
        0 1px 4px rgba(105, 56, 78, 0.08);
}

/* LOGO DAN BRAND */

.brand {
    text-align: center;
}

.logo-container {
    width: 83px;
    height: 83px;

    margin: 0 auto 7px;

    border: 2px solid var(--pink-dark);
    border-radius: 50%;
    overflow: hidden;

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

.logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand h1 {
    color: #ff328f;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.3px;
}

.decorative-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    margin: 7px auto 0;
}

.decorative-line span:not(.heart) {
    width: 47px;
    height: 1px;
    background: #ff9bc7;
}

.heart {
    color: var(--pink);
    font-size: 10px;
}

/* BORANG */

.login-form {
    margin-top: 39px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;

    margin: 0 0 3px 2px;

    color: var(--pink-dark);
    font-size: 8px;
}

/* INPUT EMAIL DAN PASSWORD */

.input-wrapper {
    display: flex;
    align-items: stretch;

    height: 28px;
    width: 100%;

    border: 1px solid #ffc1db;
    border-radius: 5px;
    background: white;

    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-wrapper:focus-within {
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(255, 77, 166, 0.10);
}

.input-icon {
    flex: 0 0 35px;

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

    color: var(--pink);
    background: #ffe7f1;
    border-right: 1px solid #ffc1db;
}

.input-icon svg {
    width: 20px;
    height: 20px;
}

.input-wrapper input {
    min-width: 0;
    width: 100%;

    border: none;
    outline: none;

    padding: 0 9px;

    color: var(--text);
    background: transparent;

    font-size: 8px;
}

.input-wrapper input::placeholder {
    color: #aaa4a8;
    opacity: 1;
}

/* IKON LIHAT PASSWORD */

.toggle-password {
    flex: 0 0 29px;

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

    border: none;
    background: transparent;
    color: #aaa4a8;

    cursor: pointer;
}

.toggle-password svg {
    width: 19px;
    height: 19px;
}

.toggle-password:hover {
    color: var(--pink-dark);
}

/* REMEMBER ME */

.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;

    margin-top: -10px;
    margin-bottom: 21px;

    font-size: 7px;
}

.remember-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    cursor: pointer;
    white-space: nowrap;
}

.remember-label input {
    appearance: none;
    -webkit-appearance: none;

    width: 15px;
    height: 15px;
    flex-shrink: 0;

    border: 1px solid #ff8fc0;
    border-radius: 2px;
    background: white;

    cursor: pointer;
    position: relative;
}

.remember-label input:checked {
    background: var(--pink-dark);
    border-color: var(--pink-dark);
}

.remember-label input:checked::after {
    content: "✓";

    position: absolute;
    left: 2px;
    top: -1px;

    color: white;
    font-size: 12px;
    font-weight: bold;
}

.remember-label span {
    font-weight: 600;
}

.forgot-password {
    color: #f52d88;
    text-decoration: none;
    white-space: nowrap;
}

.forgot-password:hover {
    text-decoration: underline;
}

/* BUTANG LOGIN */

.login-button {
    width: 100%;
    min-height: 35px;

    border: none;
    border-radius: 8px;

    color: white;
    background: linear-gradient(
        100deg,
        #ff43a1 0%,
        #ff80bf 100%
    );

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.login-button:hover {
    background: linear-gradient(
        100deg,
        #f32f91 0%,
        #ff6db4 100%
    );

    box-shadow: 0 4px 10px rgba(255, 67, 161, 0.22);
    transform: translateY(-1px);
}

.login-button:active {
    transform: translateY(0);
}

.login-button:focus-visible,
.toggle-password:focus-visible,
.forgot-password:focus-visible {
    outline: 2px solid var(--pink-dark);
    outline-offset: 3px;
}

/* HIASAN BAWAH */

.bottom-line {
    margin-top: 9px;
}

.bottom-line span:not(.heart) {
    width: 47px;
}

/* =================================
   RESPONSIVE - TABLET
   ================================= */

@media (min-width: 600px) {
    .login-card {
        max-width: 340px;
        padding: 18px 31px 14px;
    }

    .logo-container {
        width: 88px;
        height: 88px;
    }

    .brand h1 {
        font-size: 18px;
    }

    .login-form {
        margin-top: 40px;
    }

    .form-group label {
        font-size: 9px;
    }

    .input-wrapper {
        height: 36px;
    }

    .input-icon {
        flex-basis: 39px;
    }

    .input-icon svg {
        width: 22px;
        height: 22px;
    }

    .input-wrapper input {
        font-size: 10px;
    }

    .toggle-password svg {
        width: 20px;
        height: 20px;
    }

    .form-options {
        font-size: 9px;
        margin-bottom: 22px;
    }

    .login-button {
        min-height: 39px;
        font-size: 11px;
    }
}

/* =================================
   RESPONSIVE - TELEFON
   ================================= */

@media (max-width: 380px) {
    .login-container {
        padding: 20px 16px;
    }

    .login-card {
        max-width: 100%;
        padding: 20px 24px 16px;
        border-radius: 15px;
    }

    .logo-container {
        width: 78px;
        height: 78px;
    }

    .login-form {
        margin-top: 32px;
    }

    .form-group {
        margin-bottom: 18px;
    }

    .input-wrapper {
        height: 40px;
    }

    .input-wrapper input {
        font-size: 12px;
    }

    .form-group label {
        font-size: 10px;
    }

    .form-options {
        font-size: 10px;
        margin-top: -8px;
        margin-bottom: 22px;
    }

    .remember-label input {
        width: 17px;
        height: 17px;
    }

    .login-button {
        min-height: 43px;
        font-size: 12px;
    }
}

/* SKRIN PENDEK */

@media (max-height: 560px) {
    .login-container {
        align-items: flex-start;
    }
}


/* =========================================
   AKAK BELON - FLOATING BALLOON ANIMATION
   ========================================= */

/* Kawasan hiasan */
.login-container {
    isolation: isolate;
}

/* Kad sentiasa berada di hadapan belon */
.login-card {
    position: relative;
    z-index: 2;
}

/* Bentuk belon */
.floating-balloon {
    position: absolute;
    z-index: 0;

    border-radius: 50%;
    pointer-events: none;

    background: radial-gradient(
        circle at 30% 25%,
        #ffd5e8 0%,
        #ffadd1 48%,
        #ff80bc 100%
    );

    box-shadow:
        inset -8px -10px 20px rgba(235, 65, 143, 0.08),
        0 8px 24px rgba(244, 91, 159, 0.08);

    will-change: transform;
}

/* Kilauan pada belon */
.floating-balloon::before {
    content: "";

    position: absolute;
    top: 20%;
    left: 23%;

    width: 18%;
    height: 12%;

    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);

    transform: rotate(-35deg);
}

/* Belon pertama - kiri bawah */
.balloon-one {
    width: 145px;
    height: 145px;

    left: -55px;
    bottom: 8%;

    animation: balloonFloatOne 7s ease-in-out infinite;
}

/* Belon kedua - kanan atas */
.balloon-two {
    width: 105px;
    height: 105px;

    right: -35px;
    top: 5%;

    animation: balloonFloatTwo 9s ease-in-out infinite;
    animation-delay: -2s;
}

/* Belon ketiga - bahagian tengah kiri */
.balloon-three {
    width: 65px;
    height: 65px;

    left: 13%;
    top: 12%;

    opacity: 0.65;

    animation: balloonFloatThree 8s ease-in-out infinite;
    animation-delay: -4s;
}

/* Gerakan belon pertama */
@keyframes balloonFloatOne {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(12px, -18px) rotate(4deg);
    }

    50% {
        transform: translate(22px, -35px) rotate(-3deg);
    }

    75% {
        transform: translate(8px, -16px) rotate(3deg);
    }
}

/* Gerakan belon kedua */
@keyframes balloonFloatTwo {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-18px, 25px);
    }
}

/* Gerakan belon ketiga */
@keyframes balloonFloatThree {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translate(15px, -22px) rotate(8deg);
    }
}

/* =========================================
   ANIMATION MASUK UNTUK TELEFON
   ========================================= */

@keyframes mobileLoginEntrance {
    0% {
        opacity: 0;
        transform: translateY(35px) scale(0.94);
    }

    70% {
        opacity: 1;
        transform: translateY(-4px) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Animasi masuk pada skrin telefon */
@media (max-width: 600px) {
    .login-container {
        overflow: hidden;
        min-height: 100vh;
        min-height: 100svh;
    }

    .login-card {
        animation: mobileLoginEntrance 0.9s
            cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .balloon-one {
        width: 120px;
        height: 120px;
        left: -45px;
        bottom: 7%;
    }

    .balloon-two {
        width: 90px;
        height: 90px;
        right: -30px;
        top: 6%;
    }

    .balloon-three {
        width: 45px;
        height: 45px;
        left: 8%;
        top: 10%;
    }
}

/* Hormati tetapan reduce motion pengguna */
@media (prefers-reduced-motion: reduce) {
    .floating-balloon,
    body::before,
    body::after,
    .login-card {
        animation: none !important;
    }

    .login-card {
        opacity: 1;
        transform: none;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}


/* Bulatan hiasan di penjuru kanan atas */
body::before {
    animation: cornerBalloon 11s ease-in-out infinite;
}

/* Bulatan hiasan di bahagian bawah */
body::after {
    animation: bottomBalloon 13s ease-in-out infinite;
}

@keyframes cornerBalloon {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-12px, 18px);
    }
}

@keyframes bottomBalloon {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(18px, -12px);
    }
}