.login-card-container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:0.5rem 0 1rem 0;margin:0.75rem 0 1.5rem 0;position:relative;z-index:2}.login-back-bar{width:100%;max-width:420px;display:flex;justify-content:flex-start;margin-bottom:0.75rem}.btn-back-landing{display:inline-flex;align-items:center;gap:0.45rem;padding:0.45rem 0.85rem;border-radius:10px;border:1px solid var(--border-light);background:rgba(255,255,255,0.8);backdrop-filter:blur(8px);color:var(--text-muted);font-size:0.8rem;font-weight:600;cursor:pointer;transition:all 0.2s ease}.btn-back-landing:hover{color:var(--primary-blue);border-color:#bae6fd;background:#ffffff;transform:translateX(-2px)}.flip-card{background-color:transparent;width:100%;max-width:420px;perspective:1200px;position:relative;transition:height 0.28s cubic-bezier(0.4,0,0.2,1)}.flip-card-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform 0.65s cubic-bezier(0.4,0,0.2,1);transform-style:preserve-3d;will-change:transform}.flip-card.flipped-code .flip-card-inner{transform:rotateY(180deg)}.flip-card.flipped-qris .flip-card-inner{transform:rotateX(180deg)}.white-card{background:var(--card-white);border:1px solid rgba(255,255,255,0.8);border-radius:24px;padding:2.25rem 2rem;width:100%;box-shadow:0 20px 40px rgba(2,132,199,0.08),0 1px 3px rgba(0,0,0,0.04);text-align:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;position:relative;transition:all 0.28s cubic-bezier(0.4,0,0.2,1)}.card-front{position:relative;z-index:2;transform:rotateY(0deg) rotateX(0deg);height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start}.card-code{position:absolute;top:0;left:0;height:100%;width:100%;transform:rotateY(180deg);display:none;flex-direction:column;justify-content:flex-start;align-items:center;z-index:1;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-sizing:border-box}.card-code>div{width:100%}.card-qris{position:absolute;top:0;left:0;height:100%;width:100%;transform:rotateX(180deg);display:none;flex-direction:column;justify-content:space-between;align-items:center;z-index:1;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-sizing:border-box}.flip-card.show-code .card-code,.flip-card.flipped-code .card-code{display:flex}.flip-card.show-qris .card-qris,.flip-card.flipped-qris .card-qris{display:flex}.flip-card.flipped-code .card-qris,.flip-card.show-code .card-qris{display:none !important;visibility:hidden !important;opacity:0 !important;pointer-events:none !important}.flip-card.flipped-qris .card-code,.flip-card.show-qris .card-code{display:none !important;visibility:hidden !important;opacity:0 !important;pointer-events:none !important}.front-bottom-box{max-height:130px;opacity:1;transform:translateY(0);overflow:hidden;transition:max-height 0.28s cubic-bezier(0.4,0,0.2,1),opacity 0.22s ease,transform 0.28s cubic-bezier(0.4,0,0.2,1),margin 0.28s ease;display:flex;flex-direction:column;align-items:center;margin-top:0.65rem;width:100%}.front-bottom-box.contracted,.flip-card.contract-front .front-bottom-box{max-height:0 !important;opacity:0 !important;transform:translateY(-12px) !important;margin-top:0 !important;margin-bottom:0 !important;pointer-events:none !important}.btn-corner-back{position:absolute;top:1.25rem;left:1.25rem;background:transparent;border:none;color:var(--text-muted);font-size:0.84rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:0.4rem 0.65rem;border-radius:8px;transition:all 0.2s ease;z-index:10;text-decoration:none}.btn-corner-back:hover{color:var(--text-dark);background:#f1f5f9;transform:translateX(-2px)}.badge-vip-pill{display:inline-flex;align-items:center;gap:6px;background:#e0f2fe;color:var(--primary-blue);border:1px solid #bae6fd;font-size:0.72rem;font-weight:800;letter-spacing:0.5px;padding:3px 12px;border-radius:20px;margin-bottom:1.1rem;text-transform:uppercase}.extra-vip-fields{max-height:0;opacity:0;overflow:hidden;transform:translateY(-8px);transition:max-height 0.28s cubic-bezier(0.4,0,0.2,1),opacity 0.22s ease,transform 0.28s cubic-bezier(0.4,0,0.2,1),margin 0.28s ease;margin-bottom:0;pointer-events:none}.extra-vip-fields.expanded{max-height:240px;opacity:1;transform:translateY(0);margin-bottom:0.85rem;pointer-events:auto}.btn-switch-access{width:auto;background:transparent;border:none;color:var(--primary-blue);font-weight:700;font-size:0.88rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:0.4rem;padding:0.35rem 0.6rem;transition:all 0.2s ease;text-decoration:none}.btn-switch-access:hover{color:var(--primary-blue-hover);transform:translateY(-1px);text-decoration:underline}.btn-text-back{background:transparent;border:none;color:var(--text-muted);font-weight:600;font-size:0.84rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:0.85rem;padding:0.4rem 0.6rem;transition:all 0.2s ease}.btn-text-back:hover{color:var(--text-dark);transform:translateY(-1px)}.logo-box{margin-bottom:0.85rem}.school-logo{width:72px;height:72px;object-fit:contain}.brand-title{font-size:1.35rem;font-weight:800;color:var(--text-dark);margin-bottom:0.25rem;letter-spacing:-0.3px}.brand-subtitle{font-size:0.9rem;color:var(--text-muted);font-weight:500;margin-bottom:0.75rem}.form-group{margin-bottom:1.1rem;text-align:left}.form-label{display:block;font-size:0.75rem;font-weight:700;color:var(--text-muted);margin-bottom:0.4rem;letter-spacing:0.5px;text-transform:uppercase}.form-input{width:100%;padding:0.85rem 1rem;background:#f8fafc;border:1px solid var(--border-light);border-radius:12px;color:var(--text-dark);font-size:0.95rem;outline:none;transition:all 0.2s ease}.form-input:focus{background:#ffffff;border-color:var(--primary-blue);box-shadow:0 0 0 4px rgba(2,132,199,0.1)}.btn-emerald{width:100%;padding:0.85rem 1rem;background:var(--emerald-green);color:#ffffff;font-weight:700;font-size:0.95rem;border:none;border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all 0.2s ease;box-shadow:0 4px 12px rgba(16,185,129,0.25)}.btn-emerald:hover{background:var(--emerald-green-hover);transform:translateY(-1px);box-shadow:0 6px 16px rgba(16,185,129,0.35)}.btn-primary{padding:0.8rem 1.4rem;background:var(--primary-blue);color:#ffffff;font-weight:700;font-size:0.95rem;border:none;border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all 0.2s}.btn-primary:hover{background:var(--primary-blue-hover)}.qris-image-wrapper{background:#ffffff;border:1px solid var(--border-light);border-radius:16px;padding:0.75rem;box-shadow:0 4px 12px rgba(0,0,0,0.03);max-width:240px;margin:0 auto}.qris-img{width:100%;height:auto;border-radius:10px;display:block}.contact-footer{margin-top:0.55rem;font-size:0.84rem;color:var(--text-muted)}.contact-link{color:var(--emerald-green);font-weight:700;text-decoration:none;transition:color 0.2s}.contact-link:hover{color:var(--emerald-green-hover);text-decoration:underline}