body { font-family: 'Plus Jakarta Sans', sans-serif; -webkit-font-smoothing: antialiased; }
    
    .bg-school {
        background-image: linear-gradient(rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.75)),
                          url('../../img/bg1.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .animate-fade { animation: fadeIn 0.5s ease-out forwards; }

    @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
    .shake { animation: shake 0.3s ease-in-out; }

    .exit-scale { transform: scale(0.95); opacity: 0; transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); filter: blur(10px); }

    @keyframes successPulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
    .success-active { animation: successPulse 1.5s infinite; background-color: #10b981 !important; }

    .glass-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); }
    .input-focus:focus { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15); border-color: #2563eb; }
    .text-pancasila-gold,
    .text-pancasila-blue {
      background: linear-gradient(135deg, #fffbeb 0%, #fde047 30%, #facc15 60%, #eab308 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      color: #facc15;
      font-weight: 800;
      filter: drop-shadow(0 2px 10px rgba(250, 204, 21, 0.45));
      display: inline-block;
    }
    .btn-login {
      background-color: #0f172a !important;
      color: #ffffff !important;
      box-shadow: 0 10px 25px -3px rgba(15, 23, 42, 0.35);
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
      cursor: pointer;
    }
    .btn-login:hover {
      background: linear-gradient(135deg, #fef08a 0%, #fde047 30%, #facc15 65%, #eab308 100%) !important;
      color: #0f172a !important;
      box-shadow: 0 14px 30px -3px rgba(234, 179, 8, 0.55), 0 0 25px rgba(250, 204, 21, 0.6) !important;
      transform: translateY(-2px);
      font-weight: 800 !important;
    }
    .btn-login:active,
    .btn-login:focus-visible,
    .btn-login.is-loading,
    .btn-login.clicked-yellow {
      background: linear-gradient(135deg, #fef08a 0%, #fde047 30%, #facc15 65%, #eab308 100%) !important;
      color: #0f172a !important;
      box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.4), 0 8px 25px rgba(234, 179, 8, 0.6), 0 0 20px rgba(250, 204, 21, 0.5) !important;
      transform: scale(0.97);
      font-weight: 800 !important;
    }
    .btn-login.is-loading svg,
    .btn-login:hover svg,
    .btn-login:active svg,
    .btn-login.clicked-yellow svg {
      color: #0f172a !important;
      stroke: #0f172a !important;
    }

    @keyframes flowRight {
      0% { transform: translateX(-100%); opacity: 0; }
      50% { opacity: 1; }
      100% { transform: translateX(100%); opacity: 0; }
    }

    .line-container {
      position: relative;
      overflow: hidden;
      background: rgba(250, 204, 21, 0.12);
      border: 1px solid rgba(250, 204, 21, 0.25);
      border-radius: 9999px;
      box-shadow: 0 0 12px rgba(250, 204, 21, 0.15);
    }

    .line-flow {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent 0%, rgba(254, 240, 138, 0.3) 20%, #fde047 45%, #facc15 70%, #f59e0b 85%, transparent 100%);
      box-shadow: 0 0 16px rgba(250, 204, 21, 0.95), 0 0 8px rgba(245, 158, 11, 0.9), 0 0 4px #ffffff;
      animation: flowRight 2.8s infinite linear;
    }

    .logo-border-box {
      position: relative;
      width: 112px;
      height: 112px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .logo-border-box::before {
      content: '';
      position: absolute;
      width: 150%;
      height: 150%;
      background: conic-gradient(transparent, transparent, transparent, #fde047, #f59e0b);
      animation: rotateBorder 4s linear infinite;
    }

    .logo-border-box::after {
      content: '';
      position: absolute;
      inset: 4px; 
      background: white; 
      border-radius: 1.2rem;
      z-index: 1;
    }

    .logo-border-box img {
      position: relative;
      z-index: 2; 
      width: 80%;
      height: 80%;
    }

    @keyframes rotateBorder {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }