:root {
    --text: #182943;
    --muted: #71819c;
    --field: #f4f7fc;
    --border: #e6edf7;
}

* { box-sizing: border-box; }
.hidden { display: none !important; }
html, body { margin: 0; min-height: 100%; font-family: Inter, Arial, Helvetica, sans-serif; color: var(--text); }
body { min-height: 100vh; background: #fff; }
button, input { font: inherit; }
button { cursor: pointer; }

/* Layout */
.layout { min-height: 100vh; display: grid; grid-template-columns: 42% 58%; }
.brand-panel { 
    min-height: 100vh; 
    background: linear-gradient(135deg, var(--blue) 0%, #082f7a 100%); 
    color: #fff; 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
}

/* Ornamen Awan Background */
.bg-cloud {
    position: absolute;
    color: rgba(255, 255, 255, 0.07);
    z-index: 0;
    pointer-events: none;
}

/* Animasi Mengapung untuk Awan */
@keyframes floatCloud1 {
    0% { transform: translateY(0) translateX(0) rotate(-10deg); }
    50% { transform: translateY(-25px) translateX(20px) rotate(-5deg); }
    100% { transform: translateY(0) translateX(0) rotate(-10deg); }
}
@keyframes floatCloud2 {
    0% { transform: translateY(0) translateX(0) rotate(15deg); }
    50% { transform: translateY(20px) translateX(-25px) rotate(10deg); }
    100% { transform: translateY(0) translateX(0) rotate(15deg); }
}
@keyframes floatCloud3 {
    0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.04; }
    50% { transform: translateY(-15px) translateX(-15px) scale(1.1); opacity: 0.09; }
    100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.04; }
}

/* Penerapan Animasi Awan */
.cloud-1 { top: 10%; left: -15%; width: 350px; animation: floatCloud1 18s ease-in-out infinite; }
.cloud-2 { bottom: 15%; right: -20%; width: 450px; animation: floatCloud2 22s ease-in-out infinite; }
.cloud-3 { top: 40%; right: 10%; width: 150px; animation: floatCloud3 12s ease-in-out infinite; }

/* Container Logo & Tagline */
.brand-center {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 20px;
}

/* Kotak Kaca untuk Logo */
.logo-box {
    background: rgba(255, 255, 255, 0.1);
    padding: 25px 40px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}
.logo-box:hover { transform: translateY(-5px); }

/* Styling Tagline */
.tagline {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 0.85;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    margin-top: 15px;
}

/* Copyright */
.copyright {
    position: absolute;
    bottom: 25px;
    left: 0;
    right: 0;
    text-align: center;
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    opacity: 0.6;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Form Panel */
.form-panel { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 52px 34px; }
.form-wrap { width: min(100%, 450px); }
.mobile-logo { display: none; }
h1 { text-align: center; font-size: 34px; line-height: 1.2; margin: 0 0 35px; font-weight: 700; letter-spacing: -.6px; color: #080d16; }
.field { position: relative; margin: 0 0 12px; }
.field input { width: 100%; height: 62px; border: 1px solid transparent; border-radius: 9px; background: var(--field); padding: 0 18px 0 68px; font-size: 17px; color: var(--text); outline: none; transition: border-color .2s, box-shadow .2s; }
.field input::placeholder { color: #9aa5b5; }
.field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,0,0,0.05); }
.field-icon { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); color: var(--blue); width: 21px; height: 21px; pointer-events: none; }
.eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: transparent; color: #63738d; padding: 0; cursor: pointer; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: color .15s, background .15s; }
.eye:hover { color: var(--blue); background: rgba(0,0,0,0.02); }
.eye:active { background: rgba(0,0,0,0.05); }
.eye:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.eye svg { display: block; pointer-events: none; }
.password input { padding-right: 58px; }
.forgot { display: inline-block; margin: 11px 0 68px; border: 0; background: none; color: var(--blue); font-weight: 650; font-size: 15px; padding: 0; }
.primary { height: 62px; width: 100%; border: 0; border-radius: 9px; color: #fff; background: var(--blue); font-size: 17px; font-weight: 650; transition: filter .2s, transform .1s; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.primary:hover { filter: brightness(0.9); }
.primary:active { transform: scale(.995); }
.signup { text-align: center; color: #7c8798; font-size: 15px; margin: 31px 0 0; }
.text-button { border: 0; background: transparent; color: var(--blue); padding: 0; font-size: inherit; font-weight: 600; text-decoration: none; }
.tip { display: flex; gap: 13px; align-items: flex-start; margin-top: 60px; color: #7c8aa1; font-size: 15px; line-height: 1.8; }
.tip-dot { width: 14px; height: 14px; background: var(--blue); border-radius: 50%; flex: none; margin-top: 7px; box-shadow: 0 0 0 5px rgba(0,0,0,0.03); }
.tip strong { color: #52647e; margin-right: 5px; }
.notice { display: none; padding: 12px 14px; border-radius: 8px; margin: -18px 0 18px; font-size: 14px; line-height: 1.5; }
.notice.show { display: block; }
.notice.error { color: #b42318; background: #fff0f0; border: 1px solid #ffd0cc; }
.notice.info { color: #1558a6; background: #edf6ff; border: 1px solid #cce5ff; }

/* Responsive */
@media(max-width: 700px) {
    .layout { display: block; }
    .brand-panel { display: none; }
    .form-panel { min-height: 100vh; padding: 0 9.5% 48px; align-items: flex-start; }
    .form-wrap { width: 100%; padding-top: clamp(125px, 25vh, 245px); }
    .mobile-logo { display: flex; justify-content: center; margin: 0 auto 66px; color: var(--blue); }
    .mobile-logo .logo { font-size: clamp(29px, 7.4vw, 40px); }
    h1 { font-size: 30px; margin-bottom: 47px; color: #080808; }
    .field input { height: 62px; border-radius: 10px; font-size: 17px; padding-left: 68px; }
    .eye { right: 4px; width: 50px; height: 50px; }
    .forgot { margin: 11px 0 69px; font-size: 16px; }
    .primary { height: 62px; border-radius: 9px; font-size: 17px; }
    .signup { font-size: 16px; margin-top: 42px; white-space: normal; }
    .tip { margin-top: 72px; font-size: 16px; line-height: 1.8; gap: 13px; }
    
    /* Sembunyikan elemen desktop di mobile */
    .bg-cloud, .tagline, .copyright { display: none; }
    .logo-box { background: transparent; padding: 0; border: none; box-shadow: none; backdrop-filter: none; }
}
@media(max-width: 380px) {
    .form-panel { padding-left: 7%; padding-right: 7%; }
    .form-wrap { padding-top: clamp(95px, 20vh, 180px); }
    .mobile-logo { margin-bottom: 54px; }
    .forgot { margin-bottom: 52px; }
    .tip { margin-top: 58px; }
}

/* Anti Copy */
html, body, body * { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text !important; user-select: text !important; -webkit-touch-callout: default; }